Created
June 2, 2016 07:45
-
-
Save Diliprocks1986/b559eaf698545ca493487994b8825843 to your computer and use it in GitHub Desktop.
Google Material Design
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Google Material Design |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-ripple/paper-ripple.html"> | |
<link rel="import" href="http://www.polymer-project.org/components/core-icons/core-icons.html"> | |
<link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html"> | |
<section> | |
<div class="button raised"> | |
<div class="center" fit>SUBMIT</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="button raised grey"> | |
<div class="center" fit>CANCEL</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="button raised blue"> | |
<div class="center" fit>COMPOSE</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="button raised green"> | |
<div class="center" fit>OK</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
</section> | |
<section> | |
<div class="button raised grey narrow"> | |
<div class="center" fit>+1</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="button raised grey narrow label-blue"> | |
<div class="center" fit>+1</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="button raised grey narrow label-red"> | |
<div class="center" fit>+1</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
</section> | |
<section> | |
<div class="icon-button"> | |
<core-icon icon="menu"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit></paper-ripple> | |
</div> | |
<div class="icon-button"> | |
<core-icon icon="more-vert"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit></paper-ripple> | |
</div> | |
<div class="icon-button red"> | |
<core-icon icon="delete"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit></paper-ripple> | |
</div> | |
<div class="icon-button blue"> | |
<core-icon icon="account-box"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit></paper-ripple> | |
</div> | |
</section> | |
<section> | |
<div class="fab red"> | |
<core-icon icon="add"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit></paper-ripple> | |
</div> | |
<div class="fab blue"> | |
<core-icon icon="mail"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit></paper-ripple> | |
</div> | |
<div class="fab green"> | |
<core-icon icon="create"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit></paper-ripple> | |
</div> | |
</section> | |
<section> | |
<div class="menu"> | |
<div class="item"> | |
<div class="label" fit>Mark as unread</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit>Mark as important</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit>Add to Tasks</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit>Create event</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
</div> | |
<div class="menu blue"> | |
<div class="item"> | |
<div class="label" fit>Import</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit>Export</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit>Print</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit>Restore contacts</div> | |
<paper-ripple fit></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"> | |
<div class="center" fit>ACCEPT</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
<div class="button"> | |
<div class="center" fit>DECLINE</div> | |
<paper-ripple fit></paper-ripple> | |
</div> | |
</div> | |
<div class="card"> | |
<paper-ripple class="recenteringTouch" fit></paper-ripple> | |
</div> | |
<div class="card image"> | |
<paper-ripple class="recenteringTouch" fit></paper-ripple> | |
</div> | |
</section> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="http://www.polymer-project.org/components/platform/platform.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: #f9f9f9; | |
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
-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 > core-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 > core-icon { | |
-webkit-transform: scale(1.2); | |
transform: scale(1.2); | |
} | |
.icon-button > paper-ripple { | |
overflow: hidden; | |
color: #646464; | |
} | |
.icon-button.red > core-icon::shadow path { | |
fill: #db4437; | |
} | |
.icon-button.red > paper-ripple { | |
color: #db4437; | |
} | |
.icon-button.blue > core-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 > core-icon { | |
margin: 16px; | |
} | |
.fab > core-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; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment