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..c1a62821cd46a4acf81a2b53ce8dee51912fae50 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: { |
+ /* Center the ripple on the icon button. */ |
+ height: 36px; |
+ left: -8px; |
+ top: -8px; |
+ width: 36px; |
+ }; |
+ -webkit-margin-start: 16px; |
+ background-size: cover; |
+ flex-shrink: 0; |
+ height: 20px; |
+ 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,7 +322,7 @@ |
/* The middle part (horizontally) of a row. */ |
.settings-box .middle { |
- -webkit-margin-start: 16px; |
+ -webkit-padding-start: 16px; |
align-items: center; |
flex: auto; |
} |
@@ -309,6 +333,11 @@ |
flex: auto; |
} |
+ .settings-box .start.two-line { |
+ display: flex; |
+ min-height: var(--settings-row-two-line-min-height); |
+ } |
+ |
/* The secondary-action wraps a clickable sub-area of a .settings-box. |
* An example is the |sign out| button on the People settings. |
* Here is an example with and without a secondary action box: |
@@ -320,8 +349,12 @@ |
* +-------------------------------------------------------+ */ |
.settings-box .secondary-action { |
-webkit-border-start: var(--settings-separator-line); |
+ -webkit-margin-start: 20px; |
-webkit-padding-start: 20px; |
+ align-items: center; |
+ display: flex; |
flex-shrink: 0; |
+ height: 33px; |
} |
.settings-box paper-item iron-icon { |