OLD | NEW |
---|---|
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 85 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
96 * 40px"), since paper-icon-button>iron-icon width and height are | 96 * 40px"), since paper-icon-button>iron-icon width and height are |
97 * hardcoded to 100%. | 97 * hardcoded to 100%. |
98 */ | 98 */ |
99 padding: 10px; | 99 padding: 10px; |
100 }; | 100 }; |
101 --paper-input-container-focus-color: var(--google-blue-500); | 101 --paper-input-container-focus-color: var(--google-blue-500); |
102 --paper-input-container-input: { | 102 --paper-input-container-input: { |
103 color: inherit; | 103 color: inherit; |
104 font-size: inherit; | 104 font-size: inherit; |
105 font-weight: inherit; | 105 font-weight: inherit; |
106 line-height: inherit; | 106 line-height: 154%; |
107 vertical-align: baseline; | 107 vertical-align: baseline; |
108 }; | 108 }; |
109 --paper-input-container-label: { | 109 --paper-input-container-label: { |
110 font-size: inherit; | 110 font-size: inherit; |
111 line-height: inherit; | 111 line-height: 154%; |
112 } | 112 }; |
113 --paper-input-container-label-floating: { | |
114 /* Using "rem" to make it easier to equalize with other labels. */ | |
115 font-size: 1rem; | |
116 line-height: 1.25rem; | |
dpapad
2017/03/03 22:23:27
I am not familiar enough with rem units. It sounds
Dan Beam
2017/03/03 22:33:39
yes, rem are good
scottchen
2017/03/06 18:29:54
Yeah, I think we should try to use rem where we ca
| |
117 }; | |
113 --paper-input-error: { | 118 --paper-input-error: { |
114 font-size: 92.31%; /* Should be 12px when 100% is 13px. */ | 119 font-size: 92.31%; /* Should be 12px when 100% is 13px. */ |
115 line-height: inherit; | 120 line-height: 154%; |
116 overflow: visible; /* Half-visible error message is not useful at all. */ | 121 overflow: visible; /* Half-visible error message is not useful at all. */ |
117 } | 122 }; |
118 --paper-input-max-width: 264px; | 123 --paper-input-max-width: 264px; |
119 --paper-radio-button-ink-size: 40px; | 124 --paper-radio-button-ink-size: 40px; |
120 --paper-radio-button-label-color: inherit; | 125 --paper-radio-button-label-color: inherit; |
121 --paper-radio-button-size: 16px; | 126 --paper-radio-button-size: 16px; |
122 --paper-radio-group-item-padding: 0; | 127 --paper-radio-group-item-padding: 0; |
123 | 128 |
124 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); | 129 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); |
125 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); | 130 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); |
126 --paper-toggle-button-checked-button: { | 131 --paper-toggle-button-checked-button: { |
127 @apply(--settings-toggle-button-size); | 132 @apply(--settings-toggle-button-size); |
128 transform: translate(18px, 0); | 133 transform: translate(18px, 0); |
129 }; | 134 }; |
130 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); | 135 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); |
131 --paper-toggle-button-label-spacing: 0; | 136 --paper-toggle-button-label-spacing: 0; |
132 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); | 137 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); |
133 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); | 138 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); |
134 --paper-toggle-button-unchecked-ink: var(--settings-toggle-ink-size); | 139 --paper-toggle-button-unchecked-ink: var(--settings-toggle-ink-size); |
135 | 140 |
136 --settings-input-underline: { | 141 --settings-input-underline: { |
137 border-color: var(--paper-grey-300); | 142 border-color: var(--paper-grey-300); |
138 } | 143 }; |
139 | 144 |
140 --paper-input-container-underline: var(--settings-input-underline); | 145 --paper-input-container-underline: var(--settings-input-underline); |
141 } | 146 } |
142 </style> | 147 </style> |
OLD | NEW |