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

Side by Side Diff: chrome/browser/resources/settings/settings_vars_css.html

Issue 2656563006: MD Settings: Fix several global UI polish bugs. (Closed)
Patch Set: use % instead of px to prevent english text orphan Created 3 years, 10 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/cr_elements/shared_vars_css.html"> 1 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html "> 2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html ">
3 3
4 <!-- Common css variables for Material Design settings. --> 4 <!-- Common css variables for Material Design settings. -->
5 <style is="custom-style"> 5 <style is="custom-style">
6 /* We keep our vars in sort order, though some vars must be defined prior to 6 /* We keep our vars in sort order, though some vars must be defined prior to
7 * others. The --settings-* vars are defined explicitly prior to the --paper-* 7 * others. The --settings-* vars are defined explicitly prior to the --paper-*
8 * and --iron-* vars. 8 * and --iron-* vars.
9 */ 9 */
10 :root { 10 :root {
(...skipping 22 matching lines...) Expand all
33 --settings-page-vertical-margin: 21px; 33 --settings-page-vertical-margin: 21px;
34 34
35 /* These are used for row items such as radio buttons, check boxes, list 35 /* These are used for row items such as radio buttons, check boxes, list
36 * items etc. */ 36 * items etc. */
37 --settings-row-min-height: 44px; 37 --settings-row-min-height: 44px;
38 --settings-row-two-line-min-height: 56px; 38 --settings-row-two-line-min-height: 56px;
39 39
40 /* These are used for the settings-box containers, which may contain one or 40 /* These are used for the settings-box containers, which may contain one or
41 * more "row items". */ 41 * more "row items". */
42 --settings-box-min-height: 48px; 42 --settings-box-min-height: 48px;
43 --settings-box-two-line-min-height: 60px; 43 --settings-box-two-line-min-height: 64px;
44 --settings-box-three-line-min-height: 84px;
44 45
45 --settings-text-elide: { 46 --settings-text-elide: {
46 overflow: hidden; 47 overflow: hidden;
47 text-overflow: ellipsis; 48 text-overflow: ellipsis;
48 white-space: nowrap; 49 white-space: nowrap;
49 }; 50 };
50 51
51 --settings-secondary: { 52 --settings-secondary: {
52 color: var(--paper-grey-600); 53 color: var(--paper-grey-600);
53 font-weight: 400; 54 font-weight: 400;
54 margin-top: 4px;
55 }; 55 };
56 --settings-separator-line: var(--cr-separator-line); 56 --settings-separator-line: var(--cr-separator-line);
57 57
58 --settings-title-bar-background-color: var(--google-blue-700); 58 --settings-title-bar-background-color: var(--google-blue-700);
59 --settings-title-bar-color: rgb(255, 255, 255); 59 --settings-title-bar-color: rgb(255, 255, 255);
60 --settings-title-search-color: rgb(192, 199, 205); 60 --settings-title-search-color: rgb(192, 199, 205);
61 --settings-toggle-bar-size: { 61 --settings-toggle-bar-size: {
62 height: 12px; 62 height: 12px;
63 left: 4px; 63 left: 4px;
64 width: 24px; 64 width: 28px;
65 }; 65 };
66 --settings-toggle-button-size: { 66 --settings-toggle-button-size: {
67 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); 67 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
68 height: 16px; 68 height: 16px;
69 top: -2px; 69 top: -2px;
70 width: 16px; 70 width: 16px;
71 }; 71 };
72 --settings-toggle-ink-size: {
73 height: 40px;
74 top: -12px;
75 left: -12px;
76 width: 40px;
77 };
72 --settings-toggle-color: var(--google-blue-500); 78 --settings-toggle-color: var(--google-blue-500);
73 79
74 --checkbox-margin-start: 2px; 80 --checkbox-margin-start: 2px;
75 --checkbox-size: 16px; 81 --checkbox-size: 16px;
76 --checkbox-spacing: 18px; 82 --checkbox-spacing: 18px;
77 --iron-icon-fill-color: var(--paper-grey-600); 83 --iron-icon-fill-color: var(--paper-grey-600);
78 --iron-icon-height: var(--cr-icon-size); 84 --iron-icon-height: var(--cr-icon-size);
79 --iron-icon-width: var(--cr-icon-size); 85 --iron-icon-width: var(--cr-icon-size);
80 --paper-checkbox-label-color: inherit; 86 --paper-checkbox-label-color: inherit;
81 --paper-dialog-color: inherit; 87 --paper-dialog-color: inherit;
(...skipping 14 matching lines...) Expand all
96 }; 102 };
97 --paper-radio-button-ink-size: 40px; 103 --paper-radio-button-ink-size: 40px;
98 --paper-radio-button-label-color: inherit; 104 --paper-radio-button-label-color: inherit;
99 --paper-radio-button-size: 16px; 105 --paper-radio-button-size: 16px;
100 --paper-radio-group-item-padding: 0; 106 --paper-radio-group-item-padding: 0;
101 107
102 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); 108 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size);
103 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); 109 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color);
104 --paper-toggle-button-checked-button: { 110 --paper-toggle-button-checked-button: {
105 @apply(--settings-toggle-button-size); 111 @apply(--settings-toggle-button-size);
106 transform: translate(14px, 0); 112 transform: translate(18px, 0);
107 }; 113 };
108 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); 114 --paper-toggle-button-checked-button-color: var(--settings-toggle-color);
109 --paper-toggle-button-label-spacing: 0; 115 --paper-toggle-button-label-spacing: 0;
110 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); 116 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size);
111 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); 117 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size);
118 --paper-toggle-button-unchecked-ink: var(--settings-toggle-ink-size);
119
120 --settings-input-underline: {
121 border-color: var(--paper-grey-300);
122 }
123
124 --paper-input-container-underline: var(--settings-input-underline);
112 } 125 }
113 </style> 126 </style>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698