Index: chrome/browser/resources/settings/settings_shared_css.html |
diff --git a/chrome/browser/resources/settings/settings_shared_css.html b/chrome/browser/resources/settings/settings_shared_css.html |
index a3974fb0383eb454898c9e440a7783f7a5fa8a82..4a104b7fbefc7f12e68ec7b5d2ddab29562e2d3d 100644 |
--- a/chrome/browser/resources/settings/settings_shared_css.html |
+++ b/chrome/browser/resources/settings/settings_shared_css.html |
@@ -5,6 +5,30 @@ |
<dom-module id="settings-shared"> |
<template> |
<style include="cr-shared-style"> |
+ button[is="paper-icon-button-light"] { |
+ --paper-ripple: { |
tommycli
2016/09/23 19:29:57
Maybe a comment that these dimenisons are to cente
dschuyler
2016/09/27 00:43:09
Done.
|
+ height: 36px; |
+ left: -8px; |
+ top: -8px; |
+ width: 36px; |
+ }; |
+ -webkit-margin-start: 16px; |
+ background-size: cover; |
+ flex-shrink: 0; |
+ height: 20px; |
+ margin: 0; |
+ width: 20px; |
+ } |
+ |
+ [actionable] button[is="paper-icon-button-light"].icon-arrow-right { |
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23757575%22%3E%3Cg%3E%3Cpath%20d%3D%22M7%2014l5-5%205%205z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); |
+ transform: rotate(90deg); |
+ } |
+ |
+ [actionable] button[is="paper-icon-button-light"].icon-external { |
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23bdbdbd%22%3E%3Cg%3E%3Cpath%20d%3D%22M19%2019H5V5h7V3H5c-1.11%200-2%20.9-2%202v14c0%201.1.89%202%202%202h14c1.1%200%202-.9%202-2v-7h-2v7zM14%203v2h3.59l-9.83%209.83%201.41%201.41L19%206.41V10h2V3h-7z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); |
+ } |
+ |
/* Use <h2> as the "sub-header" mentioned in the UX design docs. */ |
h2 { |
align-items: center; |
@@ -33,7 +57,7 @@ |
paper-toggle-button { |
@apply(--settings-actionable); |
- height: 20px; |
+ height: var(--settings-row-min-height); |
width: 31px; |
} |
@@ -298,11 +322,16 @@ |
/* The middle part (horizontally) of a row. */ |
.settings-box .middle { |
- -webkit-margin-start: 16px; |
+ -webkit-padding-start: 16px; |
align-items: center; |
flex: auto; |
} |
+ .settings-box .middle.two-line { |
+ display: flex; |
+ min-height: var(--settings-row-two-line-min-height); |
+ } |
+ |
/* The start (left in LTR) part (horizontally) of a row. */ |
.settings-box .start { |
align-items: center; |
@@ -320,8 +349,12 @@ |
* +-------------------------------------------------------+ */ |
.settings-box .secondary-action { |
-webkit-border-start: var(--settings-separator-line); |
+ -webkit-margin-start: 20px; |
tommycli
2016/09/23 19:29:57
Why is this required?
dschuyler
2016/09/27 00:43:09
I know it looks strange because normally we use
a
|
-webkit-padding-start: 20px; |
+ align-items: center; |
+ display: flex; |
flex-shrink: 0; |
+ height: 33px; |
tommycli
2016/09/23 19:29:57
This seems odd. Why is this height required?
dschuyler
2016/09/27 00:43:09
It previously didn't have a height and the
height
|
} |
.settings-box paper-item iron-icon { |