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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/md_history/app.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/vulcanized.html ('k') | chrome/browser/resources/md_history/history_toolbar.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 1814 matching lines...) Expand 10 before | Expand all | Expand 10 after
1825 #icon { 1825 #icon {
1826 --paper-icon-button-ink-color: white; 1826 --paper-icon-button-ink-color: white;
1827 transition: margin 150ms, opacity 200ms; 1827 transition: margin 150ms, opacity 200ms;
1828 } 1828 }
1829 1829
1830 #prompt { 1830 #prompt {
1831 opacity: 0; 1831 opacity: 0;
1832 } 1832 }
1833 1833
1834 paper-spinner-lite { 1834 paper-spinner-lite {
1835 --paper-spinner-color: white; 1835 height: var(--cr-icon-size_-_height); width: var(--cr-icon-size_-_width);
1836 height: 20px; 1836 --paper-spinner-color: white;
1837 margin: 0 6px; 1837 margin: 0 6px;
1838 opacity: 0; 1838 opacity: 0;
1839 padding: 6px; 1839 padding: 6px;
1840 position: absolute; 1840 position: absolute;
1841 width: 20px;
1842 } 1841 }
1843 1842
1844 paper-spinner-lite[active] { 1843 paper-spinner-lite[active] {
1845 opacity: 1; 1844 opacity: 1;
1846 } 1845 }
1847 1846
1848 #prompt, paper-spinner-lite { 1847 #prompt, paper-spinner-lite {
1849 transition: opacity 200ms; 1848 transition: opacity 200ms;
1850 } 1849 }
1851 1850
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after
1940 --cr-toolbar-field-width: 580px; 1939 --cr-toolbar-field-width: 580px;
1941 --cr-toolbar-height: 56px; 1940 --cr-toolbar-height: 56px;
1942 align-items: center; 1941 align-items: center;
1943 color: #fff; 1942 color: #fff;
1944 display: flex; 1943 display: flex;
1945 height: var(--cr-toolbar-height); 1944 height: var(--cr-toolbar-height);
1946 } 1945 }
1947 1946
1948 h1 { 1947 h1 {
1949 -webkit-margin-start: 6px; 1948 -webkit-margin-start: 6px;
1950 -webkit-padding-end: 2px; 1949 -webkit-padding-end: 12px;
1951 flex: 1; 1950 flex: 1;
1952 font-size: 123%; 1951 font-size: 123%;
1953 font-weight: 400; 1952 font-weight: 400;
1954 text-overflow: ellipsis; 1953 text-overflow: ellipsis;
1955 overflow: hidden; 1954 overflow: hidden;
1956 white-space: nowrap; 1955 white-space: nowrap;
1957 } 1956 }
1958 1957
1959 #leftContent { 1958 #leftContent {
1960 -webkit-padding-start: 18px; 1959 -webkit-margin-start: 12px;
1961 align-items: center;
1962 box-sizing: border-box;
1963 display: flex;
1964 position: absolute;
1965 transition: opacity 100ms; 1960 transition: opacity 100ms;
1966 } 1961 }
1967 1962
1963 #leftSpacer {
1964 -webkit-margin-start: 6px;
1965 align-items: center;
1966 display: flex;
1967 }
1968
1968 #menuButton { 1969 #menuButton {
1969 height: 32px; 1970 height: 32px;
1970 margin-bottom: 6px; 1971 margin-bottom: 6px;
1971 margin-top: 6px; 1972 margin-top: 6px;
1972 min-width: 32px; 1973 min-width: 32px;
1973 padding: 6px; 1974 padding: 6px;
1974 width: 32px; 1975 width: 32px;
1975 } 1976 }
1976 1977
1977 #centeredContent { 1978 #centeredContent {
1978 display: flex; 1979 display: flex;
1979 flex: 1 1 0; 1980 flex: 1 1 0;
1980 justify-content: center;
1981 } 1981 }
1982 1982
1983 :host([narrow_]) #centeredContent { 1983 #rightContent {
1984 -webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px); 1984 -webkit-margin-end: 12px;
1985 }
1986
1987 :host(:not([narrow_])) h1 {
1988 ;
1989 }
1990
1991 :host(:not([narrow_])) #leftContent {
1992 max-width: calc((100% - var(--cr-toolbar-field-width)) / 2);
1993 ;
1994 }
1995
1996 :host(:not([narrow_])) #centeredContent {
1997 -webkit-margin-start: var(--cr-toolbar-field-margin, 0);
1998 }
1999
2000 :host(:not([narrow_])) #rightContent {
2001 position: var(--cr-toolbar-right-content-wide_-_position); left: var(--cr-tool bar-right-content-wide_-_left); right: var(--cr-toolbar-right-content-wide_-_rig ht);
2002 } 1985 }
2003 1986
2004 :host([narrow_]) #centeredContent { 1987 :host([narrow_]) #centeredContent {
2005 justify-content: flex-end; 1988 justify-content: flex-end;
2006 } 1989 }
2007 1990
2008 :host([narrow_][showing-search_]) #leftContent { 1991 :host([narrow_][showing-search_]) #leftContent {
2009 opacity: 0; 1992 position: absolute;
1993 opacity: 0;
1994 }
1995
1996 :host(:not([narrow_])) #leftContent {
1997 flex: 1 1 var(--cr-toolbar-field-margin, 0);
1998 }
1999
2000 :host(:not([narrow_])) #rightContent {
2001 flex: 1 1 0;
2002 text-align: end;
2010 } 2003 }
2011 2004
2012 #menuPromo { 2005 #menuPromo {
2013 -webkit-padding-end: 12px; 2006 -webkit-padding-end: 12px;
2014 -webkit-padding-start: 8px; 2007 -webkit-padding-start: 8px;
2015 align-items: center; 2008 align-items: center;
2016 background: #616161; 2009 background: #616161;
2017 border-radius: 2px; 2010 border-radius: 2px;
2018 color: white; 2011 color: white;
2019 display: flex; 2012 display: flex;
2020 font-size: 92.3%; 2013 font-size: 92.3%;
2021 font-weight: 500; 2014 font-weight: 500;
2022 opacity: 0; 2015 opacity: 0;
2023 padding-bottom: 6px; 2016 padding-bottom: 6px;
2024 padding-top: 6px; 2017 padding-top: 6px;
2025 position: absolute; 2018 position: absolute;
2026 top: var(--cr-toolbar-height); 2019 top: var(--cr-toolbar-height);
2027 white-space: nowrap; 2020 white-space: nowrap;
2028 z-index: 2; 2021 z-index: 2;
2029 } 2022 }
2030 2023
2031 #menuPromo::before { 2024 #menuPromo::before {
2032 background: inherit; 2025 background: inherit;
2033 2026
2034 clip-path: polygon(0 105%, 100% 105%, 50% 0); 2027 clip-path: polygon(0 105%, 100% 105%, 50% 0);
2035 content: ''; 2028 content: '';
2036 display: block; 2029 display: block;
2037 left: 10px; 2030 left: 10px;
2038 height: 6px; 2031 height: 6px;
2039 position: absolute; 2032 position: absolute;
2040 top: -6px; 2033 top: -6px;
2041 width: 12px; 2034 width: 12px;
2042 } 2035 }
2043 2036
2044 :host-context([dir=rtl]) #menuPromo::before { 2037 :host-context([dir=rtl]) #menuPromo::before {
2045 left: auto; 2038 left: auto;
2046 right: 10px; 2039 right: 10px;
2047 } 2040 }
2048 2041
2049 #closePromo { 2042 #closePromo {
2050 -webkit-appearance: none; 2043 -webkit-appearance: none;
2051 -webkit-margin-start: 12px; 2044 -webkit-margin-start: 12px;
2052 background: none; 2045 background: none;
2053 border: none; 2046 border: none;
2054 color: inherit; 2047 color: inherit;
2055 font-size: 20px; 2048 font-size: 20px;
2056 line-height: 20px; 2049 line-height: 20px;
2057 padding: 0; 2050 padding: 0;
2058 width: 20px; 2051 width: 20px;
2059 } 2052 }
2060 2053
2061 </style> 2054 </style>
2062 <div id="leftContent"> 2055 <div id="leftContent">
2063 2056 <div id="leftSpacer">
2064 <template is="dom-if" if="[[showMenu]]" restamp=""> 2057
2065 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" ti tle="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[menu Label]]"> 2058 <template is="dom-if" if="[[showMenu]]" restamp="">
2066 </paper-icon-button> 2059 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[me nuLabel]]">
2067 <template is="dom-if" if="[[showMenuPromo]]"> 2060 </paper-icon-button>
2068 <div id="menuPromo" role="tooltip"> 2061 <template is="dom-if" if="[[showMenuPromo]]">
2069 [[menuPromo]] 2062 <div id="menuPromo" role="tooltip">
2070 <button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[clo seMenuPromo]]">✕</button> 2063 [[menuPromo]]
2071 2064 <button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[c loseMenuPromo]]">✕</button>
2072 </div></template> 2065
2073 </template> 2066 </div></template>
2074 <h1>[[pageName]]</h1> 2067 </template>
2068 <h1>[[pageName]]</h1>
2069 </div>
2075 </div> 2070 </div>
2076 2071
2077 <div id="centeredContent"> 2072 <div id="centeredContent">
2078 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchP rompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing -search="{{showingSearch_}}"> 2073 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchP rompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing -search="{{showingSearch_}}">
2079 </cr-toolbar-search-field> 2074 </cr-toolbar-search-field>
2080 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> 2075 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
2081 </iron-media-query> 2076 </iron-media-query>
2082 </div> 2077 </div>
2083 2078
2084 <div id="rightContent"> 2079 <div id="rightContent">
(...skipping 228 matching lines...) Expand 10 before | Expand all | Expand 10 after
2313 2308
2314 :host([items-selected_]) { 2309 :host([items-selected_]) {
2315 background: var(--interactive-color); 2310 background: var(--interactive-color);
2316 } 2311 }
2317 2312
2318 #toolbar-container { 2313 #toolbar-container {
2319 height: var(--toolbar-height); 2314 height: var(--toolbar-height);
2320 } 2315 }
2321 2316
2322 cr-toolbar { 2317 cr-toolbar {
2323 --cr-toolbar-field-end-padding: 0; 2318 --cr-toolbar-field-margin: var(--side-bar-width);
2324 --cr-toolbar-field-margin: var(--side-bar-width);
2325 --cr-toolbar-right-content-wide_-_position: absolute; --cr-toolbar-righ t-content-wide_-_right: 0; --cr-toolbar-right-content-wide_-_left: initial;;
2326 }
2327
2328 :host-context([dir=rtl]) cr-toolbar {
2329 --cr-toolbar-right-content-wide_-_position: absolute; --cr-toolbar-right-cont ent-wide_-_left: 0; --cr-toolbar-right-content-wide_-_right: initial;;
2330 } 2319 }
2331 2320
2332 :host([has-drawer]) cr-toolbar { 2321 :host([has-drawer]) cr-toolbar {
2333 --cr-toolbar-field-margin: 0; 2322 --cr-toolbar-field-margin: 0;
2334 } 2323 }
2335 2324
2336 cr-toolbar .more-actions {
2337 -webkit-margin-end: 12px;
2338 }
2339
2340 #info-button { 2325 #info-button {
2341 background: none; 2326 background: none;
2342 border: none; 2327 border: none;
2343 color: inherit; 2328 color: inherit;
2344 height: 32px; 2329 height: 32px;
2345 margin: 6px; 2330 margin: 6px;
2346 outline: none; 2331 outline: none;
2347 padding: 0; 2332 padding: 0;
2348 width: 32px; 2333 width: 32px;
2349 } 2334 }
(...skipping 155 matching lines...) Expand 10 before | Expand all | Expand 10 after
2505 </div> 2490 </div>
2506 </template> 2491 </template>
2507 </template> 2492 </template>
2508 </dom-module> 2493 </dom-module>
2509 2494
2510 <style is="custom-style" css-build="shadow">html { 2495 <style is="custom-style" css-build="shadow">html {
2511 --cr-actionable_-_cursor: pointer;; 2496 --cr-actionable_-_cursor: pointer;;
2512 --cr-focused-item-color: var(--google-grey-300); 2497 --cr-focused-item-color: var(--google-grey-300);
2513 2498
2514 --cr-icon-padding: 8px; 2499 --cr-icon-padding: 8px;
2500 --cr-icon-size_-_height: 20px; --cr-icon-size_-_width: 20px;
2515 --cr-selectable-focus_-_background-color: var(--cr-focused-item-color); --c r-selectable-focus_-_outline: none; 2501 --cr-selectable-focus_-_background-color: var(--cr-focused-item-color); --c r-selectable-focus_-_outline: none;
2516 --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06); 2502 --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
2517 --paper-checkbox-ink-size: 40px; 2503 --paper-checkbox-ink-size: 40px;
2518 } 2504 }
2519 2505
2520 </style> 2506 </style>
2521 2507
2522 <dom-module id="cr-shared-style" assetpath="chrome://resources/cr_elements/" css -build="shadow"> 2508 <dom-module id="cr-shared-style" assetpath="chrome://resources/cr_elements/" css -build="shadow">
2523 <template> 2509 <template>
2524 <style scope="cr-shared-style">paper-spinner { 2510 <style scope="cr-shared-style">paper-spinner {
(...skipping 18 matching lines...) Expand all
2543 } 2529 }
2544 2530
2545 .action-button, .cancel-button { 2531 .action-button, .cancel-button {
2546 font-weight: 500; 2532 font-weight: 500;
2547 } 2533 }
2548 2534
2549 [actionable] { 2535 [actionable] {
2550 cursor: var(--cr-actionable_-_cursor); 2536 cursor: var(--cr-actionable_-_cursor);
2551 } 2537 }
2552 2538
2539 button[is='paper-icon-button-light'].subpage-arrow {
2540 background-image: url("chrome://resources/images/arrow_right.svg");
2541 }
2542
2543 button[is='paper-icon-button-light'].icon-external {
2544 background-image: url("chrome://resources/images/open_in_new.svg");
2545 }
2546
2547 .subpage-arrow, .icon-external {
2548 display: none;
2549 }
2550
2551 [actionable] :-webkit-any(.subpage-arrow, .icon-external), [actionable]:-webkit- any(.subpage-arrow, .icon-external) {
2552 display: block;
2553 }
2554
2553 [scrollable] { 2555 [scrollable] {
2554 border-color: transparent; 2556 border-color: transparent;
2555 border-style: solid; 2557 border-style: solid;
2556 border-width: 1px 0; 2558 border-width: 1px 0;
2557 overflow-y: auto; 2559 overflow-y: auto;
2558 } 2560 }
2559 2561
2560 [scrollable].is-scrolled { 2562 [scrollable].is-scrolled {
2561 border-top-color: var(--google-grey-300); 2563 border-top-color: var(--google-grey-300);
2562 } 2564 }
(...skipping 674 matching lines...) Expand 10 before | Expand all | Expand 10 after
3237 } 3239 }
3238 3240
3239 .action-button, .cancel-button { 3241 .action-button, .cancel-button {
3240 font-weight: 500; 3242 font-weight: 500;
3241 } 3243 }
3242 3244
3243 [actionable] { 3245 [actionable] {
3244 cursor: var(--cr-actionable_-_cursor); 3246 cursor: var(--cr-actionable_-_cursor);
3245 } 3247 }
3246 3248
3249 button[is='paper-icon-button-light'].subpage-arrow {
3250 background-image: url("chrome://resources/images/arrow_right.svg");
3251 }
3252
3253 button[is='paper-icon-button-light'].icon-external {
3254 background-image: url("chrome://resources/images/open_in_new.svg");
3255 }
3256
3257 .subpage-arrow, .icon-external {
3258 display: none;
3259 }
3260
3261 [actionable] :-webkit-any(.subpage-arrow, .icon-external), [actionable]:-webkit- any(.subpage-arrow, .icon-external) {
3262 display: block;
3263 }
3264
3247 [scrollable] { 3265 [scrollable] {
3248 border-color: transparent; 3266 border-color: transparent;
3249 border-style: solid; 3267 border-style: solid;
3250 border-width: 1px 0; 3268 border-width: 1px 0;
3251 overflow-y: auto; 3269 overflow-y: auto;
3252 } 3270 }
3253 3271
3254 [scrollable].is-scrolled { 3272 [scrollable].is-scrolled {
3255 border-top-color: var(--google-grey-300); 3273 border-top-color: var(--google-grey-300);
3256 } 3274 }
(...skipping 541 matching lines...) Expand 10 before | Expand all | Expand 10 after
3798 <history-side-bar id="drawer-side-bar" selected-page="{{selectedPage_}}" show-footer="[[showSidebarFooter]]" drawer=""> 3816 <history-side-bar id="drawer-side-bar" selected-page="{{selectedPage_}}" show-footer="[[showSidebarFooter]]" drawer="">
3799 </history-side-bar> 3817 </history-side-bar>
3800 </app-drawer> 3818 </app-drawer>
3801 </template> 3819 </template>
3802 3820
3803 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" > 3821 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" >
3804 </iron-media-query> 3822 </iron-media-query>
3805 </template> 3823 </template>
3806 </dom-module> 3824 </dom-module>
3807 <script src="app.crisper.js"></script></body></html> 3825 <script src="app.crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_downloads/vulcanized.html ('k') | chrome/browser/resources/md_history/history_toolbar.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698