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

Side by Side Diff: ui/webui/resources/cr_elements/cr_search_field/cr_search_field.css

Issue 1963503002: MD WebUI: Add shared cr-toolbar element (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Review comments Created 4 years, 7 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
OLDNEW
1 /* Copyright 2015 The Chromium Authors. All rights reserved. 1 /* Copyright 2015 The Chromium Authors. All rights reserved.
2 * Use of this source code is governed by a BSD-style license that can be 2 * Use of this source code is governed by a BSD-style license that can be
3 * found in the LICENSE file. */ 3 * found in the LICENSE file. */
4 4
5 :host { 5 :host {
6 -webkit-padding-end: 10px; 6 -webkit-padding-end: 10px;
7 box-sizing: border-box; 7 box-sizing: border-box;
8 display: flex; 8 display: flex;
9 justify-content: flex-end; 9 justify-content: flex-end;
10 } 10 }
11 11
12 :host paper-input-container { 12 :host paper-input-container {
13 margin-top: 2px; 13 margin-top: 2px;
14 max-width: 200px; 14 max-width: 200px;
15 padding: 2px 0; 15 padding: 2px 0;
16 width: 100%; 16 width: 100%;
17 } 17 }
18 18
19 #search-term { 19 #searchTerm {
20 --paper-input-container-color: rgb(192, 199, 205); 20 --paper-input-container-color: rgb(192, 199, 205);
21 --paper-input-container-focus-color: rgb(192, 199, 205); 21 --paper-input-container-focus-color: rgb(192, 199, 205);
22 --paper-input-container-input: { 22 --paper-input-container-input: {
23 color: inherit; 23 color: inherit;
24 font-family: inherit; 24 font-family: inherit;
25 font-size: inherit; 25 font-size: inherit;
26 }; 26 };
27 --paper-input-container-input-color: rgb(192, 199, 205); 27 --paper-input-container-input-color: rgb(192, 199, 205);
28 color: rgb(192, 199, 205); 28 color: rgb(192, 199, 205);
29 z-index: 0; 29 z-index: 0;
30 } 30 }
31 31
32 #search-term input[type='search']::-webkit-search-decoration, 32 #searchTerm input[type='search']::-webkit-search-decoration,
33 #search-term input[type='search']::-webkit-search-cancel-button, 33 #searchTerm input[type='search']::-webkit-search-cancel-button,
34 #search-term input[type='search']::-webkit-search-results-button { 34 #searchTerm input[type='search']::-webkit-search-results-button {
35 -webkit-appearance: none; 35 -webkit-appearance: none;
36 } 36 }
37 37
38 #search-term input[type='search']::-webkit-search-cancel-button { 38 #searchTerm input[type='search']::-webkit-search-cancel-button {
39 display: block; 39 display: block;
40 width: 20px; 40 width: 20px;
41 } 41 }
42 42
43 paper-icon-button { 43 paper-icon-button {
44 --iron-icon-height: 20px; 44 --iron-icon-height: 20px;
45 --iron-icon-width: 20px; 45 --iron-icon-width: 20px;
46 --paper-icon-button: { 46 --paper-icon-button: {
47 height: 32px; 47 height: 32px;
48 padding: 6px; 48 padding: 6px;
49 width: 32px; 49 width: 32px;
50 }; 50 };
51 } 51 }
52 52
53 #search-term paper-icon-button { 53 #searchTerm paper-icon-button {
54 --iron-icon-height: 16px; 54 --iron-icon-height: 16px;
55 --iron-icon-width: 16px; 55 --iron-icon-width: 16px;
56 --paper-icon-button: { 56 --paper-icon-button: {
57 -webkit-margin-end: -8px; 57 -webkit-margin-end: -8px;
58 height: 32px; 58 height: 32px;
59 padding: 8px; 59 padding: 8px;
60 width: 32px; 60 width: 32px;
61 }; 61 };
62 position: absolute; 62 position: absolute;
63 right: 0; 63 right: 0;
64 top: -4px; 64 top: -4px;
65 z-index: 1; 65 z-index: 1;
66 } 66 }
67 67
68 :host-context([dir='rtl']) #search-term paper-icon-button { 68 :host-context([dir='rtl']) #searchTerm paper-icon-button {
69 left: 0; 69 left: 0;
70 right: auto; 70 right: auto;
71 } 71 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698