Last active
October 4, 2016 21:40
-
-
Save mailtoharshit/88e404e8346efce659ad to your computer and use it in GitHub Desktop.
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
<!-- | |
*************************************************************************** | |
Name : Material Design on Visualforce Pages | |
Created By : Harshit Pandey (hpandey@salesforce.com) | |
For more : http://www.oyecode.com | |
Created Date : December 22, 2014 | |
*************************************************************************** --> | |
<apex:page standardStylesheets="false" showHeader="false"> | |
<!-- Import Paper Design Elements --> | |
<link rel="import" href="//www.polymer-project.org/components/core-icons/core-icons.html"/> | |
<link rel="import" href="//www.polymer-project.org/components/font-roboto/roboto.html" /> | |
<link rel="import" href="//www.polymer-project.org/components/paper-tabs/paper-tabs.html" /> | |
<link rel="import" href="//www.polymer-project.org/components/core-toolbar/core-toolbar.html" /> | |
<link rel="import" href="//www.polymer-project.org/components/paper-icon-button/paper-icon-button.html" /> | |
<link rel="import" href="//www.polymer-project.org/components/core-icons/core-icons.html" /> | |
<link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html" /> | |
<link rel="import" href="//www.polymer-project.org/components/paper-input/paper-input.html" /> | |
<link rel="import" href="//www.polymer-project.org/components/paper-input/paper-input-decorator.html" /> | |
<style> | |
body { | |
font-family:RobotoDraft, 'Helvetica Neue', Helvetica, Arial; | |
color:#333; | |
margin:0; | |
padding:24px; | |
} | |
body.core-narrow { | |
padding:8px; | |
} | |
paper-tabs,core-toolbar { | |
background-color:#00bcd4; | |
color:#fff; | |
box-shadow:0 3px 2px rgba(0,0,0,0.2); | |
} | |
core-toolbar paper-tabs { | |
box-shadow:none; | |
} | |
paper-tabs[noink][nobar] paper-tab.core-selected { | |
color:#ffff8d; | |
} | |
paper-tabs.transparent-teal { | |
background-color:transparent; | |
color:#00bcd4; | |
box-shadow:none; | |
} | |
paper-tabs.transparent-teal::shadow #selectionBar { | |
background-color:#00bcd4; | |
} | |
paper-tabs.transparent-teal paper-tab::shadow #ink { | |
color:#00bcd4; | |
} | |
h3 { | |
font-size:16px; | |
font-weight:400; | |
} | |
section { | |
padding:30px 25px; | |
} | |
section > * { | |
margin:10px; | |
} | |
.button { | |
display:inline-block; | |
position:relative; | |
width:120px; | |
height:32px; | |
line-height:32px; | |
border-radius:2px; | |
font-size:.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 .2s cubic-bezier(0.4,0,0.2,1); | |
transition-delay:.2s; | |
box-shadow:0 2px 5px 0 rgba(0,0,0,0.26); | |
} | |
.icon-button { | |
position:relative; | |
display:inline-block; | |
width:56px; | |
height:56px; | |
} | |
.icon-button > core-icon { | |
transition:transform .2s cubic-bezier(0.4,0,0.2,1); | |
margin:16px; | |
} | |
.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; | |
} | |
.fab { | |
position:relative; | |
display:inline-block; | |
width:56px; | |
height:56px; | |
border-radius:50%; | |
color:#fff; | |
overflow:hidden; | |
transition:box-shadow .2s cubic-bezier(0.4,0,0.2,1); | |
transition-delay:.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 > core-icon { | |
margin:16px; | |
} | |
.fab > core-icon::shadow path { | |
fill:#fff; | |
} | |
.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:.9em; | |
} | |
.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:.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; | |
} | |
.center { | |
text-align:center; | |
} | |
.label { | |
padding:0 16px; | |
} | |
.label-red { | |
color:#d23f31; | |
} | |
.button.raised:active,.fab:active { | |
box-shadow:0 8px 17px 0 rgba(0,0,0,0.2); | |
transition-delay:0; | |
} | |
.icon-button.blue > paper-ripple,.menu.blue > .item,.label-blue { | |
color:#4285f4; | |
} | |
paper-input { | |
width: 80%; | |
} | |
paper-input-decorator { | |
max-width: 80%; | |
} | |
paper-input.narrow { | |
width: 150px; | |
} | |
.custom /deep/ ::-webkit-input-placeholder { | |
color: #f4b400; | |
} | |
.custom /deep/ ::-moz-placeholder { | |
color: #f4b400; | |
} | |
.custom /deep/ :-ms-input-placeholder { | |
color: #f4b400; | |
} | |
.custom /deep/ .label-text, | |
.custom /deep/ .error { | |
color: #f4b400; | |
} | |
.custom /deep/ .unfocused-underline { | |
background-color: #f4b400; | |
} | |
.custom[focused] /deep/ .floated-label .label-text { | |
color: #0f9d58; | |
} | |
.custom /deep/ .focused-underline { | |
background-color: #0f9d58; | |
} | |
.custom.invalid /deep/ .floated-label .label-text, | |
.custom /deep/ .error { | |
color: #f06292; | |
} | |
.custom.invalid /deep/ .focused-underline { | |
background-color: #f06292; | |
} | |
.custom { | |
color: #1a237e; | |
} | |
</style> | |
<!-- HTML Code Goes Here --> | |
<h3>Tabs in Toolbar</h3> | |
<core-toolbar class="medium-tall"> | |
<paper-icon-button icon="menu"></paper-icon-button> | |
<div flex="true">Title</div> | |
<paper-icon-button icon="search"></paper-icon-button> | |
<paper-icon-button icon="more-vert"></paper-icon-button> | |
<div class="bottom" fit="true" horizontal="true" layout="true"> | |
<paper-tabs selected="0" flex="true" style="max-width: 600px;"> | |
<paper-tab>ITEM ONE</paper-tab> | |
<paper-tab>ITEM TWO</paper-tab> | |
<paper-tab>ITEM THREE</paper-tab> | |
</paper-tabs> | |
</div> | |
</core-toolbar> | |
<br/> | |
<section> | |
<div>Custom Input Styling</div> | |
<br/> | |
<paper-input class="custom" label="paper-input"></paper-input> | |
<br/> | |
<paper-input-decorator class="custom" label="decorator"> | |
<input is="core-input" /> | |
</paper-input-decorator> | |
</section> | |
<br/> | |
Rippled Buttons | |
<section> | |
<div class="button raised"> | |
<div class="center" fit="true">SUBMIT</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="button raised grey"> | |
<div class="center" fit="true">CANCEL</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="button raised blue"> | |
<div class="center" fit="true">COMPOSE</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="button raised green"> | |
<div class="center" fit="true">OK</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
</section> | |
<section> | |
<div class="button raised grey narrow"> | |
<div class="center" fit="true">+1</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="button raised grey narrow label-blue"> | |
<div class="center" fit="true">+1</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="button raised grey narrow label-red"> | |
<div class="center" fit="true">+1</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
</section> | |
Rippled Icons | |
<section> | |
<div class="icon-button"> | |
<core-icon icon="menu"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit="true"></paper-ripple> | |
</div> | |
<div class="icon-button"> | |
<core-icon icon="more-vert"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit="true"></paper-ripple> | |
</div> | |
<div class="icon-button red"> | |
<core-icon icon="delete"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit="true"></paper-ripple> | |
</div> | |
<div class="icon-button blue"> | |
<core-icon icon="account-box"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit="true"></paper-ripple> | |
</div> | |
</section> | |
<section> | |
<div class="fab red"> | |
<core-icon icon="add"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit="true"></paper-ripple> | |
</div> | |
<div class="fab blue"> | |
<core-icon icon="mail"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit="true"></paper-ripple> | |
</div> | |
<div class="fab green"> | |
<core-icon icon="create"></core-icon> | |
<paper-ripple class="circle recenteringTouch" fit="true"></paper-ripple> | |
</div> | |
</section> | |
Paper Menu | |
<section> | |
<div class="menu"> | |
<div class="item"> | |
<div class="label" fit="true">Mark as unread</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit="true">Mark as important</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit="true">Add to Tasks</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit="true">Create event</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
</div> | |
<div class="menu blue"> | |
<div class="item"> | |
<div class="label" fit="true">Import</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit="true">Export</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit="true">Print</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="item"> | |
<div class="label" fit="true">Restore contacts</div> | |
<paper-ripple fit="true"></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="true">ACCEPT</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
<div class="button"> | |
<div class="center" fit="true">DECLINE</div> | |
<paper-ripple fit="true"></paper-ripple> | |
</div> | |
</div> | |
<div class="card image"> | |
<paper-ripple class="recenteringTouch" fit="true"></paper-ripple> | |
</div> | |
</section> | |
</apex:page> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment