Commit bba7e8ac authored by dpapad's avatar dpapad Committed by Commit Bot

WebUI MD Refresh: Apply new button style in various signin dialogs.

Bug: 843770,843348
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ifb8517c90cecd569b6600b896329d713a96c82e7
Reviewed-on: https://chromium-review.googlesource.com/1068074Reviewed-by: default avatarScott Chen <scottchen@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#560818}
parent 92baec6d
<link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html"> <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/html/cr.html"> <link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
...@@ -14,7 +15,7 @@ ...@@ -14,7 +15,7 @@
<dom-module id="sync-confirmation-app"> <dom-module id="sync-confirmation-app">
<template> <template>
<style include="signin-dialog-shared"> <style include="signin-dialog-shared paper-button-style">
:host { :host {
display: block; display: block;
/* Saves space for button row. */ /* Saves space for button row. */
...@@ -35,13 +36,13 @@ ...@@ -35,13 +36,13 @@
width: 100%; width: 100%;
} }
.secondary-action { paper-button:not(.action-button) {
-webkit-margin-start: 16px; -webkit-margin-start: 16px;
} }
<if expr="is_macosx or is_linux"> <if expr="is_macosx or is_linux">
/* This works together with the button-flip in signin-dialog-shared. */ /* This works together with the button-flip in signin-dialog-shared. */
.secondary-action { paper-button:not(.action-button) {
-webkit-margin-end: 16px; -webkit-margin-end: 16px;
-webkit-margin-start: 0; -webkit-margin-start: 0;
} }
...@@ -191,15 +192,15 @@ ...@@ -191,15 +192,15 @@
</div> </div>
</div> </div>
<div class="action-container"> <div class="action-container">
<paper-button class="primary-action" id="confirmButton" <paper-button class="action-button" id="confirmButton"
on-click="onConfirm_" consent-confirmation> on-click="onConfirm_" consent-confirmation>
$i18n{syncConfirmationConfirmLabel} $i18n{syncConfirmationConfirmLabel}
</paper-button> </paper-button>
<paper-button class="secondary-action" on-click="onUndo_" <paper-button on-click="onUndo_"
hidden="[[isConsentBump_]]"> hidden="[[isConsentBump_]]">
$i18n{syncConfirmationUndoLabel} $i18n{syncConfirmationUndoLabel}
</paper-button> </paper-button>
<paper-button class="secondary-action" on-click="onMoreOptions_" <paper-button on-click="onMoreOptions_"
hidden="[[!isConsentBump_]]"> hidden="[[!isConsentBump_]]">
$i18n{syncConfirmationMoreOptionsLabel} $i18n{syncConfirmationMoreOptionsLabel}
</paper-button> </paper-button>
...@@ -235,11 +236,11 @@ ...@@ -235,11 +236,11 @@
</cr-radio-button> </cr-radio-button>
</paper-radio-group> </paper-radio-group>
<div class="action-container"> <div class="action-container">
<paper-button class="primary-action" on-click="onOK_" <paper-button class="action-button" on-click="onOK_"
consent-confirmation> consent-confirmation>
$i18n{syncConfirmationOptionsConfirmLabel} $i18n{syncConfirmationOptionsConfirmLabel}
</paper-button> </paper-button>
<paper-button class="secondary-action" on-click="onBack_"> <paper-button on-click="onBack_">
$i18n{syncConfirmationOptionsBackLabel} $i18n{syncConfirmationOptionsBackLabel}
</paper-button> </paper-button>
</div> </div>
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html"> <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
...@@ -12,7 +13,7 @@ ...@@ -12,7 +13,7 @@
<link rel="import" href="chrome://resources/html/cr.html"> <link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/load_time_data.html"> <link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/util.html"> <link rel="import" href="chrome://resources/html/util.html">
<style is="custom-style" include="signin-dialog-shared"> <style is="custom-style" include="signin-dialog-shared paper-button-style">
.container { .container {
/* The sign-in confirmation dialog uses a width that is larger than /* The sign-in confirmation dialog uses a width that is larger than
* the other sign-in dialogs to fit cases when the user has an email * the other sign-in dialogs to fit cases when the user has an email
...@@ -89,10 +90,10 @@ ...@@ -89,10 +90,10 @@
</paper-radio-group> </paper-radio-group>
</div> </div>
<div class="action-container"> <div class="action-container">
<paper-button class="primary-action" id="confirmButton"> <paper-button class="action-button" id="confirmButton">
$i18n{signinEmailConfirmationConfirmLabel} $i18n{signinEmailConfirmationConfirmLabel}
</paper-button> </paper-button>
<paper-button class="secondary-action" id="closeButton"> <paper-button id="closeButton">
$i18n{signinEmailConfirmationCloseLabel} $i18n{signinEmailConfirmationCloseLabel}
</paper-button> </paper-button>
</div> </div>
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html i18n-values="dir:textdirection;lang:language" dir="$i18n{textdirection}"> <html i18n-values="dir:textdirection;lang:language" dir="$i18n{textdirection}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
...@@ -10,7 +11,7 @@ ...@@ -10,7 +11,7 @@
<link rel="import" href="chrome://resources/html/cr.html"> <link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/load_time_data.html"> <link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/util.html"> <link rel="import" href="chrome://resources/html/util.html">
<style is="custom-style" include="signin-dialog-shared"> <style is="custom-style" include="signin-dialog-shared paper-button-style">
.details { .details {
line-height: 20px; line-height: 20px;
margin-bottom: 8px; margin-bottom: 8px;
...@@ -82,13 +83,13 @@ ...@@ -82,13 +83,13 @@
<p>$i18n{profileBlockedRemoveProfileSuggestion}</p> <p>$i18n{profileBlockedRemoveProfileSuggestion}</p>
</div> </div>
<div class="action-container"> <div class="action-container">
<paper-button class="primary-action" id="switchButton"> <paper-button class="action-button" id="switchButton">
$i18n{signinErrorSwitchLabel} $i18n{signinErrorSwitchLabel}
</paper-button> </paper-button>
<paper-button class="secondary-action" id="closeButton"> <paper-button id="closeButton">
$i18n{signinErrorCloseLabel} $i18n{signinErrorCloseLabel}
</paper-button> </paper-button>
<paper-button class="primary-action" id="confirmButton" hidden> <paper-button id="confirmButton" hidden>
$i18n{signinErrorOkLabel} $i18n{signinErrorOkLabel}
</paper-button> </paper-button>
</div> </div>
......
...@@ -12,30 +12,6 @@ ...@@ -12,30 +12,6 @@
padding: 0; padding: 0;
} }
paper-button {
font-weight: 500;
line-height: 16px;
margin: 0;
padding: 8px 16px;
}
paper-button.primary-action {
--paper-button-flat-keyboard-focus: {
background: rgb(58, 117, 215);
font-weight: 500;
};
background: var(--google-blue-500);
color: white;
}
paper-button.secondary-action {
--paper-button-flat-keyboard-focus: {
background: rgba(0, 0, 0, .12);
font-weight: 500;
};
color: var(--paper-grey-600);
}
.container { .container {
background-color: white; background-color: white;
color: #333; color: #333;
......
...@@ -2,13 +2,14 @@ ...@@ -2,13 +2,14 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}"> <html dir="$i18n{textdirection}" lang="$i18n{language}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="signin_shared_css.html"> <link rel="import" href="signin_shared_css.html">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="sync_confirmation.css"></link> <link rel="stylesheet" href="sync_confirmation.css"></link>
<style is="custom-style" include="signin-dialog-shared"> <style is="custom-style" include="signin-dialog-shared paper-button-style">
<if expr="is_macosx or is_linux"> <if expr="is_macosx or is_linux">
#undoButton { #undoButton {
-webkit-margin-end: 8px; -webkit-margin-end: 8px;
...@@ -98,11 +99,11 @@ ...@@ -98,11 +99,11 @@
</div> </div>
</div> </div>
<div class="action-container"> <div class="action-container">
<paper-button class="primary-action" id="confirmButton" <paper-button class="action-button" id="confirmButton"
consent-confirmation> consent-confirmation>
$i18n{syncConfirmationConfirmLabel} $i18n{syncConfirmationConfirmLabel}
</paper-button> </paper-button>
<paper-button class="secondary-action" id="undoButton"> <paper-button id="undoButton">
$i18n{syncConfirmationUndoLabel} $i18n{syncConfirmationUndoLabel}
</paper-button> </paper-button>
</div> </div>
......
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
0 3px 6px 2px var(--google-blue-500-opacity-15); 0 3px 6px 2px var(--google-blue-500-opacity-15);
} }
paper-button.action-button { paper-button:not([raised]).action-button {
--paper-ripple-opacity: 0.32; --paper-ripple-opacity: 0.32;
--paper-button-ink-color: white; --paper-button-ink-color: white;
--google-blue-500-opacity-30: rgba(66, 133, 244, 0.3); --google-blue-500-opacity-30: rgba(66, 133, 244, 0.3);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment