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

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: Style review comments Created 4 years, 6 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 [hidden] {
13 display: none !important;
14 }
15
16 paper-input-container {
13 margin-top: 2px; 17 margin-top: 2px;
14 max-width: 200px; 18 max-width: 200px;
15 padding: 2px 0; 19 padding: 2px 0;
16 width: 100%; 20 width: 100%;
17 } 21 }
18 22
19 #search-term { 23 #searchTerm {
20 --paper-input-container-color: rgb(192, 199, 205); 24 --paper-input-container-color: rgb(192, 199, 205);
21 --paper-input-container-focus-color: rgb(192, 199, 205); 25 --paper-input-container-focus-color: rgb(192, 199, 205);
22 --paper-input-container-input: { 26 --paper-input-container-input: {
23 color: inherit; 27 color: inherit;
24 font-family: inherit; 28 font-family: inherit;
25 font-size: inherit; 29 font-size: inherit;
26 }; 30 };
27 --paper-input-container-input-color: rgb(192, 199, 205); 31 --paper-input-container-input-color: rgb(192, 199, 205);
28 color: rgb(192, 199, 205); 32 color: rgb(192, 199, 205);
29 z-index: 0; 33 z-index: 0;
30 } 34 }
31 35
32 #search-term input[type='search']::-webkit-search-decoration, 36 #searchTerm input[type='search']::-webkit-search-decoration,
33 #search-term input[type='search']::-webkit-search-cancel-button, 37 #searchTerm input[type='search']::-webkit-search-cancel-button,
34 #search-term input[type='search']::-webkit-search-results-button { 38 #searchTerm input[type='search']::-webkit-search-results-button {
35 -webkit-appearance: none; 39 -webkit-appearance: none;
36 } 40 }
37 41
38 #search-term input[type='search']::-webkit-search-cancel-button { 42 #searchTerm input[type='search']::-webkit-search-cancel-button {
39 display: block; 43 display: block;
40 width: 20px; 44 width: 20px;
41 } 45 }
42 46
43 paper-icon-button { 47 paper-icon-button {
44 --iron-icon-height: 20px; 48 --iron-icon-height: 20px;
45 --iron-icon-width: 20px; 49 --iron-icon-width: 20px;
46 --paper-icon-button: { 50 --paper-icon-button: {
47 height: 32px; 51 height: 32px;
48 padding: 6px; 52 padding: 6px;
49 width: 32px; 53 width: 32px;
50 }; 54 };
51 } 55 }
52 56
53 #search-term paper-icon-button { 57 #searchTerm paper-icon-button {
54 --iron-icon-height: 16px; 58 --iron-icon-height: 16px;
55 --iron-icon-width: 16px; 59 --iron-icon-width: 16px;
56 --paper-icon-button: { 60 --paper-icon-button: {
57 -webkit-margin-end: -8px; 61 -webkit-margin-end: -8px;
58 height: 32px; 62 height: 32px;
59 padding: 8px; 63 padding: 8px;
60 width: 32px; 64 width: 32px;
61 }; 65 };
62 position: absolute; 66 position: absolute;
63 right: 0; 67 right: 0;
64 top: -4px; 68 top: -4px;
65 z-index: 1; 69 z-index: 1;
66 } 70 }
67 71
68 :host-context([dir='rtl']) #search-term paper-icon-button { 72 :host-context([dir='rtl']) #searchTerm paper-icon-button {
69 left: 0; 73 left: 0;
70 right: auto; 74 right: auto;
71 } 75 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698