OLD | NEW |
---|---|
1 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> | 1 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
2 <link rel="import" href="settings_vars_css.html"> | 2 <link rel="import" href="settings_vars_css.html"> |
3 | 3 |
4 <!-- Common styles for Material Design settings. --> | 4 <!-- Common styles for Material Design settings. --> |
5 <dom-module id="settings-shared"> | 5 <dom-module id="settings-shared"> |
6 <template> | 6 <template> |
7 <style include="cr-shared-style"> | 7 <style include="cr-shared-style"> |
8 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { | 8 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { |
9 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ | 9 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
10 } | 10 } |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
66 .primary-button { | 66 .primary-button { |
67 --paper-button-flat-keyboard-focus: { | 67 --paper-button-flat-keyboard-focus: { |
68 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ | 68 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ |
69 }; | 69 }; |
70 } | 70 } |
71 | 71 |
72 a[href] { | 72 a[href] { |
73 text-decoration: none; | 73 text-decoration: none; |
74 } | 74 } |
75 | 75 |
76 /* For elements that are simple outlinks but dont look like anchors. */ | 76 /* For elements that are simple out-links but don't look like anchors. */ |
77 .inherit-color { | 77 .inherit-color { |
78 color: inherit !important; | 78 color: inherit !important; |
79 } | 79 } |
80 | 80 |
81 /* There are three main button styles, .primary-button, .secondary-button, | 81 /* There are three main button styles, .primary-button, .secondary-button, |
82 * and .tertiary-button. The primary is the action button (e.g. "edit", | 82 * and .tertiary-button. The primary is the action button (e.g. "edit", |
83 * "delete") while the secondary is often a "Cancel" button. A tertiary | 83 * "delete") while the secondary is often a "Cancel" button. A tertiary |
84 * button may be used to get more information or similar, that we expect | 84 * button may be used to get more information or similar, that we expect |
85 * most users will not need. */ | 85 * most users will not need. */ |
86 .primary-button { | 86 .primary-button { |
87 --paper-button: { | 87 --paper-button: { |
88 -webkit-padding-end: var(--settings-button-edge-spacing); | |
89 -webkit-padding-start: var(--settings-button-edge-spacing); | |
88 font-weight: 500; | 90 font-weight: 500; |
89 text-align: start; | 91 text-align: start; |
90 }; | 92 }; |
91 } | 93 } |
92 | 94 |
93 .primary-toggle { | 95 .primary-toggle { |
94 color: var(--paper-grey-600); | 96 color: var(--paper-grey-600); |
95 font-weight: 500; | 97 font-weight: 500; |
96 } | 98 } |
97 | 99 |
98 .primary-toggle[checked] { | 100 .primary-toggle[checked] { |
99 color: var(--google-blue-500); | 101 color: var(--google-blue-500); |
100 } | 102 } |
101 | 103 |
102 /* See notes in .primary-button. */ | 104 /* See notes in .primary-button. */ |
103 .secondary-button { | 105 .secondary-button { |
104 --paper-button: { | 106 --paper-button: { |
107 -webkit-padding-end: var(--settings-button-edge-spacing); | |
108 -webkit-padding-start: var(--settings-button-edge-spacing); | |
105 color: var(--paper-grey-600); | 109 color: var(--paper-grey-600); |
106 font-weight: 500; | 110 font-weight: 500; |
107 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */ | 111 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */ |
108 text-decoration: none; | 112 text-decoration: none; |
109 }; | 113 }; |
110 --paper-button-flat-keyboard-focus: { | 114 --paper-button-flat-keyboard-focus: { |
111 background: rgba(0, 0, 0, .12); | 115 background: rgba(0, 0, 0, .12); |
112 }; | 116 }; |
113 } | 117 } |
114 | 118 |
115 .settings-box .primary-button, | 119 .settings-box .primary-button, |
116 .settings-box .secondary-button, | |
117 .settings-box .secondary-button { | 120 .settings-box .secondary-button { |
118 -webkit-margin-end: -12px; | 121 -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1); |
119 -webkit-margin-start: -12px; | 122 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1); |
120 -webkit-padding-end: 12px; | |
121 -webkit-padding-start: 12px; | |
dschuyler
2017/05/08 23:35:04
Moving the padding to the .primary-button and .sec
| |
122 } | 123 } |
123 | 124 |
124 paper-checkbox { | 125 paper-checkbox { |
125 --paper-checkbox-checked-color: var(--google-blue-500); | 126 --paper-checkbox-checked-color: var(--google-blue-500); |
126 --paper-checkbox-label-spacing: var(--settings-control-spacing); | 127 --paper-checkbox-label-spacing: var(--settings-control-spacing); |
127 --paper-checkbox-size: var(--checkbox-size); | 128 --paper-checkbox-size: var(--checkbox-size); |
128 --paper-checkbox-unchecked-color: var(--paper-grey-600); | 129 --paper-checkbox-unchecked-color: var(--paper-grey-600); |
129 -webkit-margin-start: var(--checkbox-margin-start); | 130 -webkit-margin-start: var(--checkbox-margin-start); |
130 } | 131 } |
131 | 132 |
(...skipping 268 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
400 transform: rotate(-135deg); | 401 transform: rotate(-135deg); |
401 } | 402 } |
402 | 403 |
403 .column-header { | 404 .column-header { |
404 color: var(--paper-grey-600); | 405 color: var(--paper-grey-600); |
405 font-weight: 500; | 406 font-weight: 500; |
406 } | 407 } |
407 </style> | 408 </style> |
408 </template> | 409 </template> |
409 </dom-module> | 410 </dom-module> |
OLD | NEW |