blob: 608cf8a16cb6e08ea02eb1f6266d40249d8cc057 [file] [log] [blame]
<link rel="import" href="../html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="shared_vars_css.html">
<!-- Common paper-button styling for Material Design WebUI. -->
<dom-module id="paper-button-style">
<template>
<style>
paper-button {
--active-shadow-rgb: var(--google-grey-800-rgb);
--active-shadow-action-rgb: var(--google-blue-500-rgb);
--border-color: var(--google-grey-refresh-300);
--disabled-color: var(--google-grey-refresh-100);
--disabled-text-color: var(--google-grey-600);
--flat-bg-action: var(--google-blue-600);
--flat-disabled-bg: white;
--flat-disabled-border-color: var(--google-grey-refresh-100);
--flat-focus-shadow-color: rgba(var(--google-blue-600-rgb), .4);
--flat-ink-color-action: white;
--flat-ripple-opacity-action: .32;
--flat-text-color-action: white;
--hover-bg-action: rgba(var(--google-blue-600-rgb), .9);
--hover-bg-color: rgba(var(--google-blue-500-rgb), .04);
--hover-border-color: var(--google-blue-refresh-100);
--hover-shadow-action-rgb: var(--google-blue-500-rgb);
/* Blue-ish color used either as a background or as a text color,
* depending on the type of button. */
--paper-button-ink-color: var(--google-blue-600);
--ripple-opacity: .1;
--text-color: var(--google-blue-600);
}
[dark] paper-button,
:host-context([dark]) paper-button {
/* Only in dark. */
--active-bg: black linear-gradient(rgba(255, 255, 255, .06),
rgba(255, 255, 255, .06));
--active-shadow-rgb: 0, 0, 0;
--active-shadow-action-rgb: var(--google-blue-refresh-500-rgb);
--border-color: var(--google-grey-refresh-700);
--disabled-color: var(--google-grey-800);
/* --disabled-text-color is same as light mode (GG 600). */
--flat-bg-action: var(--google-blue-refresh-300);
/* TODO(dbeam): get --flat-disabled-bg from Namrata. */
--flat-disabled-bg: transparent;
--flat-disabled-border-color: var(--google-grey-800);
--flat-focus-shadow-color: rgba(var(--google-blue-refresh-300-rgb), .5);
--flat-ink-color-action: black;
--flat-ripple-opacity-action: .16;
--flat-text-color-action: var(--google-grey-900);
--hover-bg-action: var(--flat-bg-action)
linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
--hover-bg-color: rgba(var(--google-blue-refresh-300-rgb), .08);
/* No change in secondary box-shadow or border color on hover
* (--hover-border-color, --hover-shadow-action-rgb) in dark mode. */
--paper-button-ink-color: var(--google-blue-refresh-300);
--ripple-opacity: .16;
--text-color: var(--google-blue-refresh-300);
}
paper-button {
--paper-ripple-opacity: var(--ripple-opacity);
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--text-color);
flex-shrink: 0;
font-weight: 500;
height: 32px;
margin: 0;
padding: 8px 16px;
text-decoration: none;
text-transform: none;
}
/* Override paper-button's default transition. |animated| is automatically
* added to all paper-button instances, unfortunately. */
paper-button[animated] {
transition: none;
}
paper-button:not([raised]).keyboard-focus,
paper-button:not([raised]).action-button.keyboard-focus {
box-shadow: 0 0 0 2px var(--flat-focus-shadow-color);
/* Override default paper-button's internal font-weight style. */
font-weight: 500;
}
paper-button:not(.action-button):hover {
background-color: var(--hover-bg-color);
}
:host-context(html:not([dark])) paper-button:not(.action-button):hover {
border-color: var(--hover-border-color);
}
paper-button:not(.action-button):active {
background: var(--active-bg);
box-shadow:
0 1px 2px 0 rgba(var(--active-shadow-rgb), .3),
0 3px 6px 2px rgba(var(--active-shadow-rgb), .15);
}
paper-button:not([raised]).action-button:hover {
background: var(--hover-bg-action);
}
:host-context(html:not([dark])) paper-button.action-button:hover {
box-shadow:
0 1px 2px 0 rgba(var(--hover-shadow-action-rgb), .3),
0 1px 3px 1px rgba(var(--hover-shadow-action-rgb), .15);
}
paper-button.action-button:active {
box-shadow:
0 1px 2px 0 rgba(var(--active-shadow-action-rgb), .3),
0 3px 6px 2px rgba(var(--active-shadow-action-rgb), .15);
}
paper-button:not([raised]).action-button {
--paper-button-ink-color: var(--flat-ink-color-action);
--paper-ripple-opacity: var(--flat-ripple-opacity-action);
background-color: var(--flat-bg-action);
border: none;
color: var(--flat-text-color-action);
}
paper-button:not([raised])[disabled] {
background-color: var(--flat-disabled-bg);
border-color: var(--flat-disabled-border-color);
color: var(--disabled-text-color);
}
paper-button:not([raised]).action-button[disabled] {
background-color: var(--disabled-color);
border-color: transparent;
color: var(--disabled-text-color);
}
/* cancel-button is meant to be used within a cr-dialog */
paper-button.cancel-button {
margin-inline-end: 8px;
}
paper-button.action-button,
paper-button.cancel-button {
line-height: 154%;
}
</style>
</template>
</dom-module>