2015-06-19 09:36:51 -07:00
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
< html >
< head >
< title > paper-ripple demo< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0" >
< meta name = "mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< script src = "../../webcomponentsjs/webcomponents-lite.js" > < / script >
< link rel = "import" href = "../../iron-icons/iron-icons.html" >
< link rel = "import" href = "../paper-ripple.html" >
2015-12-14 08:43:03 -07:00
< link rel = "import" href = "../../paper-styles/typography.html" >
2015-06-19 09:36:51 -07:00
< link rel = "import" href = "../../iron-icon/iron-icon.html" >
< style >
body {
background-color: #f9f9f9;
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
section {
padding: 30px 25px;
}
section > * {
margin: 10px
}
/* Button */
.button {
display: inline-block;
position: relative;
width: 120px;
height: 32px;
line-height: 32px;
border-radius: 2px;
font-size: 0.9em;
background-color: #fff;
color: #646464;
}
.button > paper-ripple {
border-radius: 2px;
overflow: hidden;
}
.button.narrow {
width: 60px;
}
.button.grey {
background-color: #eee;
}
.button.blue {
background-color: #4285f4;
color: #fff;
}
.button.green {
background-color: #0f9d58;
color: #fff;
}
.button.raised {
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button.raised:active {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
transition-delay: 0s;
}
/* Icon Button */
.icon-button {
position: relative;
display: inline-block;
width: 56px;
height: 56px;
}
.icon-button > iron-icon {
margin: 16px;
transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.icon-button:hover > iron-icon {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.icon-button > paper-ripple {
overflow: hidden;
color: #646464;
}
.icon-button.red > iron-icon::shadow path {
fill: #db4437;
}
.icon-button.red > paper-ripple {
color: #db4437;
}
.icon-button.blue > iron-icon::shadow path {
fill: #4285f4;
}
.icon-button.blue > paper-ripple {
color: #4285f4;
}
/* FAB */
.fab {
position: relative;
display: inline-block;
width: 56px;
height: 56px;
border-radius: 50%;
color: #fff;
overflow: hidden;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.fab.red {
background-color: #d23f31;
}
.fab.blue {
background-color: #4285f4;
}
.fab.green {
background-color: #0f9d58;
}
.fab:active {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
transition-delay: 0s;
}
.fab > iron-icon {
margin: 16px;
}
.fab > iron-icon::shadow path {
fill: #fff;
}
/* Menu */
.menu {
display: inline-block;
width: 180px;
background-color: #fff;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
.item {
position: relative;
height: 48px;
line-height: 48px;
color: #646464;
font-size: 0.9em;
}
.menu.blue > .item {
color: #4285f4;
}
/* Card, Dialog */
.card, .dialog {
position: relative;
display: inline-block;
width: 300px;
height: 240px;
vertical-align: top;
background-color: #fff;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
.dialog {
box-sizing: border-box;
padding: 16px;
}
.dialog > .content {
height: 170px;
font-size: 0.9em;
}
.dialog > .content > .title {
font-size: 1.3em;
}
.dialog > .button {
width: 90px;
float: right;
}
.card.image {
background: url(http://lorempixel.com/300/240/nature/);
color: #fff;
}
/* Misc */
.center {
text-align: center;
}
.label {
padding: 0 16px;
}
.label-blue {
color: #4285f4;
}
.label-red {
color: #d23f31;
}
< / style >
< / head >
< body >
< section >
< div class = "button raised" >
2015-12-14 08:43:03 -07:00
< div class = "center" fit tabindex = "1" > SUBMIT< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
2015-10-07 18:49:40 -07:00
< div class = "button raised" noink >
2015-12-14 08:43:03 -07:00
< div class = "center" fit tabindex = "1" > NO INK< / div >
2015-10-07 18:49:40 -07:00
< paper-ripple noink > < / paper-ripple >
< / div >
2015-06-19 09:36:51 -07:00
< div class = "button raised grey" >
2015-12-14 08:43:03 -07:00
< div class = "center" fit tabindex = "1" > CANCEL< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "button raised blue" >
2015-12-14 08:43:03 -07:00
< div class = "center" fit tabindex = "1" > COMPOSE< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "button raised green" >
2015-12-14 08:43:03 -07:00
< div class = "center" fit tabindex = "1" > OK< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< / section >
< section >
< div class = "button raised grey narrow" >
2015-12-14 08:43:03 -07:00
< div class = "center" fit tabindex = "1" > +1< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "button raised grey narrow label-blue" >
2015-12-14 08:43:03 -07:00
< div class = "center" fit tabindex = "1" > +1< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "button raised grey narrow label-red" >
2015-12-14 08:43:03 -07:00
< div class = "center" fit tabindex = "1" > +1< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< / section >
< section >
< div class = "icon-button" >
2015-12-14 08:43:03 -07:00
< iron-icon icon = "menu" tabindex = "1" > < / iron-icon >
2015-06-19 09:36:51 -07:00
< paper-ripple class = "circle" recenters > < / paper-ripple >
< / div >
< div class = "icon-button" >
2015-12-14 08:43:03 -07:00
< iron-icon icon = "more-vert" tabindex = "1" > < / iron-icon >
2015-06-19 09:36:51 -07:00
< paper-ripple class = "circle" recenters > < / paper-ripple >
< / div >
< div class = "icon-button red" >
2015-12-14 08:43:03 -07:00
< iron-icon icon = "delete" tabindex = "1" > < / iron-icon >
2015-06-19 09:36:51 -07:00
< paper-ripple class = "circle" recenters > < / paper-ripple >
< / div >
< div class = "icon-button blue" >
2015-12-14 08:43:03 -07:00
< iron-icon icon = "account-box" tabindex = "1" > < / iron-icon >
2015-06-19 09:36:51 -07:00
< paper-ripple class = "circle" recenters > < / paper-ripple >
< / div >
< / section >
< section >
< div class = "fab red" >
2015-12-14 08:43:03 -07:00
< iron-icon icon = "add" tabindex = "1" > < / iron-icon >
2015-06-19 09:36:51 -07:00
< paper-ripple class = "circle" recenters > < / paper-ripple >
< / div >
< div class = "fab blue" >
2015-12-14 08:43:03 -07:00
< iron-icon icon = "mail" tabindex = "1" > < / iron-icon >
2015-06-19 09:36:51 -07:00
< paper-ripple class = "circle" recenters > < / paper-ripple >
< / div >
< div class = "fab green" >
2015-12-14 08:43:03 -07:00
< iron-icon icon = "create" tabindex = "1" > < / iron-icon >
2015-06-19 09:36:51 -07:00
< paper-ripple class = "circle" recenters > < / paper-ripple >
< / div >
< / section >
< section >
< div class = "menu" >
< div class = "item" >
2015-12-14 08:43:03 -07:00
< div class = "label" fit tabindex = "1" > Mark as unread< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "item" >
2015-12-14 08:43:03 -07:00
< div class = "label" fit tabindex = "1" > Mark as important< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "item" >
2015-12-14 08:43:03 -07:00
< div class = "label" fit tabindex = "1" > Add to Tasks< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "item" >
2015-12-14 08:43:03 -07:00
< div class = "label" fit tabindex = "1" > Create event< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< / div >
< div class = "menu blue" >
< div class = "item" >
2015-12-14 08:43:03 -07:00
< div class = "label" fit tabindex = "1" > Import< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "item" >
2015-12-14 08:43:03 -07:00
< div class = "label" fit tabindex = "1" > Export< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "item" >
2015-12-14 08:43:03 -07:00
< div class = "label" fit tabindex = "1" > Print< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "item" >
2015-12-14 08:43:03 -07:00
< div class = "label" fit tabindex = "1" > Restore contacts< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< / div >
< / section >
< section >
< div class = "dialog" >
< div class = "content" >
< div class = "title" > Permission< / div > < br >
< div > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.< / div >
< / div >
< div class = "button label-blue" >
2015-12-14 08:43:03 -07:00
< div class = "center" fit tabindex = "1" > ACCEPT< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< div class = "button" >
2015-12-14 08:43:03 -07:00
< div class = "center" fit tabindex = "1" > DECLINE< / div >
2015-06-19 09:36:51 -07:00
< paper-ripple > < / paper-ripple >
< / div >
< / div >
2015-12-14 08:43:03 -07:00
< div class = "card" tabindex = "1" >
2015-06-19 09:36:51 -07:00
< paper-ripple recenters > < / paper-ripple >
< / div >
2015-12-14 08:43:03 -07:00
< div class = "card image" tabindex = "1" >
2015-06-19 09:36:51 -07:00
< paper-ripple recenters > < / paper-ripple >
< / div >
< / section >
< / body >
< / html >
