ea82d1c0fb
Additionally: + Introduces a new, red secondary button style. Applied to the ‘Reply’ button. It is always highlighted. + Default button styles are gray and not just white. Change-Id: Idf12bcefac873fea65dc569405334d28ff667092
135 lines
3.6 KiB
HTML
135 lines
3.6 KiB
HTML
<!--
|
|
Copyright (C) 2016 The Android Open Source Project
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
|
|
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
|
<link rel="import" href="../../../behaviors/gr-tooltip-behavior/gr-tooltip-behavior.html">
|
|
<link rel="import" href="../../../behaviors/keyboard-shortcut-behavior.html">
|
|
|
|
<dom-module id="gr-button">
|
|
<template strip-whitespace>
|
|
<style>
|
|
:host {
|
|
background-color: #f5f5f5;
|
|
border: 1px solid #d1d2d3;
|
|
border-radius: 2px;
|
|
box-sizing: border-box;
|
|
color: #333;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-family: var(--font-family);
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
outline-width: 0;
|
|
padding: .4em .85em;
|
|
position: relative;
|
|
text-align: center;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
:host([hidden]) {
|
|
display: none;
|
|
}
|
|
:host([primary]),
|
|
:host([secondary]) {
|
|
color: #fff;
|
|
}
|
|
:host([primary]) {
|
|
background-color: #4d90fe;
|
|
border-color: #3079ed;
|
|
}
|
|
:host([secondary]) {
|
|
background-color: #d14836;
|
|
border-color: transparent;
|
|
}
|
|
:host([small]) {
|
|
font-size: 12px;
|
|
}
|
|
:host([link]) {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: #00f;
|
|
font-size: inherit;
|
|
font-weight: normal;
|
|
padding: 0;
|
|
text-decoration: underline;
|
|
}
|
|
:host([loading]),
|
|
:host([disabled]) {
|
|
background-color: #efefef;
|
|
color: #aaa;
|
|
}
|
|
:host([disabled]) {
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
:host([loading]),
|
|
:host([loading][disabled]) {
|
|
cursor: wait;
|
|
}
|
|
:host(:focus:not([primary]:not[secondary])),
|
|
:host(:hover:not([primary]:not[secondary])) {
|
|
background-color: #f8f8f8;
|
|
border-color: #aaa;
|
|
}
|
|
:host(:active) {
|
|
border-color: #d1d2d3;
|
|
color: #aaa;
|
|
}
|
|
:host([primary]:focus),
|
|
:host([secondary]:focus),
|
|
:host([primary]:active),
|
|
:host([secondary]:active) {
|
|
color: #fff;
|
|
}
|
|
:host([primary]:focus) {
|
|
box-shadow: 0 0 1px #00f;
|
|
}
|
|
:host([primary]:hover) {
|
|
background-color: #4d90fe;
|
|
border-color: #00F;
|
|
}
|
|
:host([primary]:active),
|
|
:host([secondary]:active) {
|
|
box-shadow: none;
|
|
}
|
|
:host([primary]:active) {
|
|
border-color: #0c2188;
|
|
}
|
|
:host([secondary]:focus) {
|
|
box-shadow: 0 0 1px #f00;
|
|
}
|
|
:host([secondary]:hover) {
|
|
background-color: #c53727;
|
|
border: 1px solid #b0281a;
|
|
}
|
|
:host([secondary]:active) {
|
|
border-color: #941c0c;
|
|
}
|
|
:host([primary][loading]),
|
|
:host([primary][disabled]) {
|
|
background-color: #7caeff;
|
|
border-color: transparent;
|
|
color: #fff;
|
|
}
|
|
|
|
</style>
|
|
<content></content>
|
|
</template>
|
|
<script src="gr-button.js"></script>
|
|
</dom-module>
|