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

Side by Side Diff: ui/webui/resources/cr_elements/shared_style_css.html

Issue 2848973003: MD Settings: convert paper-icon-button to paper-icon-button-light. (Closed)
Patch Set: move more icons to classes Created 3 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 <link rel="import" href="chrome://resources/html/polymer.html"> 1 <link rel="import" href="chrome://resources/html/polymer.html">
2 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> 2 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
3 <link rel="import" href="hidden_style_css.html"> 3 <link rel="import" href="hidden_style_css.html">
4 <link rel="import" href="cr_icons_css.html">
4 5
5 <!-- Common styles for Material Design WebUI. Included directly in 6 <!-- Common styles for Material Design WebUI. Included directly in
6 settings_shared_css.html. --> 7 settings_shared_css.html. -->
7 <dom-module id="cr-shared-style"> 8 <dom-module id="cr-shared-style">
8 <template> 9 <template>
9 <style include="cr-hidden-style"> 10 <style include="cr-hidden-style cr-icons">
10 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { 11 :host-context([dir=rtl]) button[is='paper-icon-button-light'] {
11 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ 12 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */
12 } 13 }
13 14
14 /* Chrome spinners should be blue. */ 15 /* Chrome spinners should be blue. */
15 paper-spinner { 16 paper-spinner {
16 --paper-spinner-layer-1-color: var(--google-blue-500); 17 --paper-spinner-layer-1-color: var(--google-blue-500);
17 --paper-spinner-layer-2-color: var(--google-blue-500); 18 --paper-spinner-layer-2-color: var(--google-blue-500);
18 --paper-spinner-layer-3-color: var(--google-blue-500); 19 --paper-spinner-layer-3-color: var(--google-blue-500);
19 --paper-spinner-layer-4-color: var(--google-blue-500); 20 --paper-spinner-layer-4-color: var(--google-blue-500);
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
52 -webkit-margin-end: var(--cr-icon-ripple-margin); 53 -webkit-margin-end: var(--cr-icon-ripple-margin);
53 -webkit-margin-start: 16px; 54 -webkit-margin-start: 16px;
54 background-position: center; 55 background-position: center;
55 background-repeat: no-repeat; 56 background-repeat: no-repeat;
56 background-size: var(--cr-icon-size); 57 background-size: var(--cr-icon-size);
57 flex-shrink: 0; 58 flex-shrink: 0;
58 height: var(--cr-icon-ripple-size); 59 height: var(--cr-icon-ripple-size);
59 width: var(--cr-icon-ripple-size); 60 width: var(--cr-icon-ripple-size);
60 } 61 }
61 62
62 button[is='paper-icon-button-light'].subpage-arrow {
63 background-image: url(chrome://resources/images/arrow_right.svg);
64 }
65
66 button[is='paper-icon-button-light'].icon-cancel {
67 background-image: url(chrome://resources/images/icon_cancel.svg);
68 }
69
70 button[is='paper-icon-button-light'].icon-cancel-toolbar {
71 background-image:
72 url(chrome://resources/images/icon_cancel_toolbar.svg);
73 }
74
75 button[is='paper-icon-button-light'].icon-external {
76 background-image: url(chrome://resources/images/open_in_new.svg);
77 }
78
79 .subpage-arrow, 63 .subpage-arrow,
80 .icon-external { 64 .icon-external {
81 display: none; 65 display: none;
82 } 66 }
83 67
84 paper-icon-button.subpage-arrow {
85 background-image: url(../images/arrow_right.svg);
86 }
87
88 [actionable] :-webkit-any(.subpage-arrow, .icon-external), 68 [actionable] :-webkit-any(.subpage-arrow, .icon-external),
89 [actionable]:-webkit-any(.subpage-arrow, .icon-external) { 69 [actionable]:-webkit-any(.subpage-arrow, .icon-external) {
90 display: block; 70 display: block;
91 } 71 }
92 72
93 [scrollable] { 73 [scrollable] {
94 border-color: transparent; 74 border-color: transparent;
95 border-style: solid; 75 border-style: solid;
96 border-width: 1px 0; 76 border-width: 1px 0;
97 overflow-y: auto; 77 overflow-y: auto;
(...skipping 18 matching lines...) Expand all
116 [selectable]:focus, 96 [selectable]:focus,
117 [selectable] > :focus { 97 [selectable] > :focus {
118 @apply(--cr-selectable-focus); 98 @apply(--cr-selectable-focus);
119 } 99 }
120 [selectable] > * { 100 [selectable] > * {
121 @apply(--cr-actionable); 101 @apply(--cr-actionable);
122 } 102 }
123 </style> 103 </style>
124 </template> 104 </template>
125 </dom-module> 105 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698