| <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
| <link rel="import" href="settings_vars_css.html"> |
| |
| <!-- Common styles for Material Design settings. --> |
| <dom-module id="settings-shared"> |
| <template> |
| <style include="cr-shared-style"> |
| /* Included here so we don't have to include "iron-positioning" in every |
| * stylesheet. See crbug.com/498405. */ |
| [hidden] { |
| display: none !important; |
| } |
| |
| :host-context([dir=rtl]) button[is='paper-icon-button-light'] { |
| transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
| } |
| |
| :host-context([dir=rtl]) paper-icon-button[icon='settings:arrow-back'] { |
| transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
| } |
| |
| /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ |
| h2 { |
| align-items: center; |
| align-self: flex-start; |
| color: var(--paper-grey-600); |
| display: flex; |
| font-size: inherit; |
| font-weight: 500; |
| margin: 0; |
| padding-top: 24px; |
| padding-bottom: 12px; |
| } |
| |
| iron-icon[icon='cr:check'], |
| iron-icon[icon='settings:done'] { |
| --iron-icon-fill-color: var(--google-green-500); |
| } |
| |
| paper-button { |
| height: 32px; |
| margin: 0; |
| border-radius: 4px; |
| } |
| |
| paper-button[toggles][active] { |
| background-color: var(--paper-grey-300); |
| } |
| |
| paper-toggle-button { |
| @apply(--settings-actionable); |
| height: var(--settings-row-min-height); |
| width: 31px; |
| } |
| |
| span ~ a { |
| -webkit-margin-start: 4px; |
| } |
| |
| .primary-button, |
| .tertiary-button, |
| a[href] { |
| color: var(--google-blue-700); |
| } |
| |
| .primary-button, |
| .tertiary-button { |
| --paper-button-flat-keyboard-focus: { |
| background: rgba(51, 103, 214, .12); /* --google-blue-700 */ |
| }; |
| } |
| |
| a[href] { |
| text-decoration: none; |
| } |
| |
| /* There are three main button styles, .primary-button, .secondary-button, |
| * and .tertiary-button. The primary is the action button (e.g. "edit", |
| * "delete") while the secondary is often a "Cancel" button. A tertiary |
| * button may be used to get more information or similar, that we expect |
| * most users will not need. */ |
| .primary-button { |
| --paper-button: { |
| font-weight: 500; |
| text-align: start; |
| }; |
| } |
| |
| /* See notes in .primary-button. */ |
| .secondary-button { |
| --paper-button: { |
| color: var(--paper-grey-600); |
| font-weight: 500; |
| min-width: 1em; /* A tighter fit than 5.14em for short buttons. */ |
| text-decoration: none; |
| }; |
| --paper-button-flat-keyboard-focus: { |
| background: rgba(0, 0, 0, .12); |
| }; |
| } |
| |
| /* See notes in .primary-button. */ |
| .tertiary-button { |
| --paper-button: { |
| font-weight: 400; |
| text-decoration: none; |
| }; |
| } |
| |
| .settings-box .primary-button, |
| .settings-box .secondary-button, |
| .settings-box .secondary-button { |
| -webkit-margin-end: -12px; |
| -webkit-margin-start: -12px; |
| -webkit-padding-end: 12px; |
| -webkit-padding-start: 12px; |
| } |
| |
| paper-checkbox { |
| --paper-checkbox-checked-color: var(--google-blue-500); |
| --paper-checkbox-label-spacing: var(--checkbox-spacing); |
| --paper-checkbox-size: var(--checkbox-size); |
| --paper-checkbox-unchecked-color: var(--paper-grey-600); |
| -webkit-margin-start: var(--checkbox-margin-start); |
| } |
| |
| paper-radio-button { |
| --paper-radio-button-checked-color: var(--google-blue-500); |
| --paper-radio-button-label-spacing: 18px; |
| --paper-radio-button-unchecked-color: var(--paper-grey-600); |
| -webkit-margin-start: 2px; |
| align-items: center; |
| display: flex; |
| min-height: var(--settings-row-min-height); |
| } |
| |
| paper-radio-group { |
| width: 100%; |
| } |
| |
| .text-elide { |
| @apply(--settings-text-elide); |
| } |
| |
| /** |
| * By default, flexbox children have min-width calculated to be the width |
| * of the content. However, in some cases we might want to allow the |
| * width to be smaller than the content (i.e. for long text to ellipsis). |
| * In such cases this class should be applied. |
| * (See: https://bugzilla.mozilla.org/show_bug.cgi?id=1108514#c5) |
| */ |
| .no-min-width { |
| min-width: 0; |
| } |
| |
| .button-strip { |
| text-align: end; |
| } |
| |
| .header-aligned-button { |
| margin-top: 12px; /* Align paper-button with <h2>. */ |
| } |
| |
| /* A list-frame is an outer container for list-items. It is intended to be |
| * outside of a settings-box. A list-frame is likely to follow a |
| * settings box. */ |
| .list-frame { |
| @apply(--settings-list-frame-padding); |
| align-items: center; |
| display: block; |
| } |
| |
| /* A list-item is intended to be contained within a list-frame. The list |
| * frame will setup the initial start margin. */ |
| .list-item { |
| align-items: center; |
| display: flex; |
| min-height: var(--settings-row-min-height); |
| padding: 0; |
| } |
| |
| /* A thin separator line under a list item. */ |
| .list-item.underbar { |
| border-bottom: var(--settings-separator-line); |
| } |
| |
| .list-item.selected { |
| font-weight: 500; |
| } |
| |
| /* The middle part (horizontally) of a list item. */ |
| .list-item .middle { |
| flex: 1; |
| margin: 8px 16px; |
| } |
| |
| /* The start (left in LTR) part (horizontally) of a list item. */ |
| .list-item > .start { |
| flex: 1; |
| } |
| |
| .list-item > label span[disabled] { |
| opacity: var(--settings-disabled-opacity); |
| } |
| |
| .list-item > paper-icon-item { |
| padding: 0; |
| } |
| |
| /* This button has no ink ripple. */ |
| .list-button[is='action-link'] { |
| min-height: inherit; |
| display: flex; |
| align-items: center; |
| flex: 1; |
| font-weight: 500; |
| } |
| |
| /* A row with two lines of text. Often the lower line will be .secondary. |
| */ |
| .two-line { |
| min-height: var(--settings-row-two-line-min-height); |
| } |
| |
| /* A settings-box is a horizontal row of text or controls within a |
| * setting section (page or subpage). */ |
| .settings-box { |
| align-items: center; |
| border-top: var(--settings-separator-line); |
| display: flex; |
| min-height: var(--settings-box-min-height); |
| padding: 0 var(--settings-box-row-padding); |
| } |
| |
| .settings-box.two-line { |
| min-height: var(--settings-box-two-line-min-height); |
| } |
| |
| .settings-box.three-line { |
| min-height: var(--settings-box-three-line-min-height); |
| } |
| |
| /* We use an explicit tag to remove the top border, rather than a |
| * :first-of-type modifier. This is a conscious choice, please consult |
| * with dbeam@ or dschuyler@ prior to changing it. */ |
| .settings-box.first, |
| .settings-box.continuation { |
| border-top: none; |
| } |
| |
| .settings-box.block { |
| display: block; |
| } |
| |
| /* A start-aligned column. */ |
| .single-column { |
| align-items: flex-start; |
| flex-direction: column; |
| justify-content: center; |
| } |
| |
| /* A settings-box with no height other than the separator line. */ |
| .settings-box.line-only { |
| min-height: 0; |
| } |
| |
| /* The lower line of text in a two-line row. */ |
| .secondary { |
| @apply(--settings-secondary); |
| } |
| |
| /* The |:empty| CSS selector only works when there is no whitespace. |
| * E.g. <div>[[foo]]</div> will be |:empty| when foo == ""; and |
| * <div> [[foo]] </div> will not be |:empty| when foo == "". Ensure there |
| * is no extra whitespace when the contents of .secondary may be "". |
| */ |
| .secondary:empty { |
| margin: 0; |
| } |
| |
| /* The middle part (horizontally) of a row. */ |
| .settings-box .middle { |
| -webkit-padding-start: 16px; |
| align-items: center; |
| flex: auto; |
| } |
| |
| .settings-box .middle.two-line, |
| .settings-box .start.two-line { |
| display: flex; |
| } |
| |
| /* The start (left in LTR) part (horizontally) of a row. */ |
| .settings-box .start { |
| align-items: center; |
| flex: auto; |
| } |
| |
| /* 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: |
| * |
| * +-------------------------------------------------------+ |
| * | Main action area .settings-box | .secondary-action | |
| * +-------------------------------------------------------+ |
| * | Another setting-box without a secondary-action | |
| * +-------------------------------------------------------+ */ |
| .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: var(--settings-row-min-height); |
| } |
| |
| /* Helper for a list frame to automatically avoid the separator line. */ |
| .vertical-list > *:not(:first-of-type) { |
| border-top: var(--settings-separator-line); |
| } |
| |
| .settings-checkbox-spacer { |
| -webkit-margin-start: calc( |
| var(--checkbox-margin-start) + |
| var(--checkbox-size) + |
| var(--checkbox-spacing)); |
| } |
| |
| .favicon-image { |
| background-repeat: no-repeat; |
| background-size: contain; |
| height: 16px; |
| width: 16px; |
| } |
| |
| .search-bubble { |
| position: absolute; |
| z-index: 1; |
| } |
| |
| .search-bubble-innards { |
| align-items: center; |
| background-color: var(--paper-yellow-500); |
| border-radius: 2px; |
| padding: 4px 10px; |
| text-align: center; |
| width: 100px; |
| } |
| |
| /* Provides the arrow which points at the anchor element. */ |
| .search-bubble-innards::after { |
| background-color: var(--paper-yellow-500); |
| content: ''; |
| height: 10px; |
| left: 55px; |
| position: absolute; |
| top: -5px; |
| transform: rotate(-45deg); |
| width: 10px; |
| z-index: -1; |
| } |
| |
| /* Turns the arrow direction downwards, when the bubble is placed above |
| * the anchor element */ |
| .search-bubble-innards.above::after { |
| bottom: -5px; |
| top: auto; |
| transform: rotate(-135deg); |
| } |
| </style> |
| </template> |
| </dom-module> |
