1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

fix image loading

This commit is contained in:
Luke Pulverenti 2015-06-16 00:52:01 -04:00
parent 46776f1eac
commit 0d59297b1b
86 changed files with 5857 additions and 273 deletions

View file

@ -16,7 +16,7 @@
<div data-role="content"> <div data-role="content">
<div class="viewSettings"> <div class="viewSettings">
<h2 class="categoryTitle" style="margin: 0 1em 0 0; display: inline-block; vertical-align: middle; font-weight:300;"></h2> <h1 class="categoryTitle" style="margin: 0 1em 0 0; display: inline-block; vertical-align: middle;"></h1>
<div class="listTopPaging"> <div class="listTopPaging">
</div> </div>

View file

@ -2,10 +2,12 @@
<html> <html>
<head> <head>
<title>${TitleSignIn}</title> <title>${TitleSignIn}</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head> </head>
<body class="serverlessPage"> <body class="serverlessPage">
<div id="connectLoginPage" data-role="page" class="page standalonePage connectLoginPage" data-theme="b" data-require="scripts/connectlogin"> <div id="connectLoginPage" data-role="page" class="page standalonePage connectLoginPage" data-theme="b" data-require="scripts/connectlogin,css!thirdparty/paper-button/paper-button-style">
<link rel="import" href="thirdparty/iron-icons/iron-icons.html">
<link rel="import" href="thirdparty/paper-button/paper-button.html">
<div data-role="content"> <div data-role="content">
@ -24,33 +26,25 @@
<input type="password" id="txtManualPassword" required="required" /> <input type="password" id="txtManualPassword" required="required" />
</div> </div>
<button class="btn btnActionAccent" data-role="none" type="submit"> <button type="submit" style="display:none" class="btnSubmitConnectLoginForm"></button>
<span> <button type="submit" data-role="none" class="clearButton">
${ButtonSignIn} <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSignIn}</span></paper-button>
</span>
<i class="fa fa-check"></i>
</button> </button>
<p class="forgotPassword"> <p class="forgotPassword">
<a href="http://emby.media/community/index.php?app=core&module=global&section=lostpass" target="_blank">${ButtonForgotPassword}</a> <a href="http://emby.media/community/index.php?app=core&module=global&section=lostpass" target="_blank" class="clearLink">
<paper-button raised class="cancel block"><iron-icon icon="close"></iron-icon><span>${ButtonForgotPassword}</span></paper-button>
</a>
</p> </p>
<div class="skip"> <div class="skip">
<br /> <br />
<button class="btn btnDarkAccent btnSkipConnect" data-role="none" type="button"> <paper-button raised class="cancel block btnSkipConnect"><iron-icon icon="close"></iron-icon><span>${ButtonSkip}</span></paper-button>
<span>
${ButtonSkip}
</span>
<i class="fa fa-close"></i>
</button>
<div class="fieldDescription">${TextConnectToServerManually}</div> <div class="fieldDescription">${TextConnectToServerManually}</div>
</div> </div>
<div class="newUsers"> <div class="newUsers" style="margin-top:2em;">
<h2 style="text-align: left;">${HeaderNewUsers}</h2> <h2 style="text-align: left;">${HeaderNewUsers}</h2>
<a class="btn btnSignupForConnect" href="http://emby.media/community/index.php?app=core&module=global&section=register" target="_blank"> <a href="http://emby.media/community/index.php?app=core&module=global&section=register" target="_blank" class="clearLink">
<span> <paper-button raised class="secondary block btnSignupForConnect"><iron-icon icon="add"></iron-icon><span>${ButtonSignUp}</span></paper-button>
${ButtonSignUp}
</span>
<i class="fa fa-plus-circle"></i>
</a> </a>
</div> </div>
</form> </form>
@ -71,18 +65,11 @@
</div> </div>
<br /> <br />
<button class="btn btnActionAccent" data-role="none" type="submit"> <button type="submit" style="display:none" class="btnSubmitManualServerForm"></button>
<span> <button type="submit" data-role="none" class="clearButton">
${ButtonConnect} <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonConnect}</span></paper-button>
</span>
<i class="fa fa-check"></i>
</button> </button>
<a class="btn btnDarkAccent" href="#" data-rel="back"> <paper-button raised class="cancel block btnCancelManualServer"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
<span>
${ButtonCancel}
</span>
<i class="fa fa-close"></i>
</a>
</form> </form>
<form class="signupForm" style="text-align: center; margin: 0 auto;display:none;"> <form class="signupForm" style="text-align: center; margin: 0 auto;display:none;">
@ -110,18 +97,10 @@
<div class="g-recaptcha" id="recaptchaWidget" data-sitekey="6Le2LAgTAAAAAK06Wvttt_yUnbISTy6q3Azqp9po" data-theme="dark"></div> <div class="g-recaptcha" id="recaptchaWidget" data-sitekey="6Le2LAgTAAAAAK06Wvttt_yUnbISTy6q3Azqp9po" data-theme="dark"></div>
<br /> <br />
<button class="btn btnActionAccent" data-role="none" type="submit"> <button type="submit" data-role="none" class="clearButton">
<span> <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSignUp}</span></paper-button>
${ButtonSignUp}
</span>
<i class="fa fa-check"></i>
</button> </button>
<a class="btn btnDarkAccent" href="#" data-rel="back"> <paper-button raised class="cancel block btnCancelSignup"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
<span>
${ButtonCancel}
</span>
<i class="fa fa-close"></i>
</a>
</form> </form>
<div class="welcomeContainer readOnlyContent" style="text-align: center; margin: 0 auto;display:none;"> <div class="welcomeContainer readOnlyContent" style="text-align: center; margin: 0 auto;display:none;">
@ -132,12 +111,7 @@
<p style="margin:2em 0;" class="embyIntroDownloadMessage"></p> <p style="margin:2em 0;" class="embyIntroDownloadMessage"></p>
<a class="btn btnActionAccent btnIconRight" href="connectlogin.html?mode=connect"> <paper-button raised class="submit block btnWelcomeNext iconRight"><iron-icon icon="arrow-forward"></iron-icon><span>${ButtonNext}</span></paper-button>
<span>
${ButtonNext}
</span>
<i class="fa fa-arrow-right"></i>
</a>
</div> </div>
</div> </div>
</div> </div>

View file

@ -52,7 +52,7 @@
} }
.mediumCardMargin .cardBox { .mediumCardMargin .cardBox {
margin: 5px; margin: 4px;
} }
@media all and (max-width: 800px) { @media all and (max-width: 800px) {

View file

@ -13,7 +13,7 @@
} }
.backdropPage.ui-page-theme-a { .backdropPage.ui-page-theme-a {
background-color: rgba(240, 240,240, .86) !important; background-color: rgba(240, 240,240, .90) !important;
} }
.backdropPage.ui-page-theme-a:not(.lightBackdropPage) { .backdropPage.ui-page-theme-a:not(.lightBackdropPage) {
@ -25,7 +25,7 @@
} }
.backdropPage.ui-page-theme-b { .backdropPage.ui-page-theme-b {
background-color: rgba(20, 20,20, .86) !important; background-color: rgba(20, 20,20, .90) !important;
} }
.backdropPage.ui-page-theme-b:not(.lightBackdropPage) { .backdropPage.ui-page-theme-b:not(.lightBackdropPage) {
@ -64,21 +64,24 @@
} }
.listHeader { .listHeader {
margin-top: 1em; margin: .25em 0;
margin-bottom: .25em;
padding-left: 2px; padding-left: 2px;
} }
.firstListHeader { .listHeader + paper-button {
margin-top: 1em; margin-left: 2em;
} }
.ehsContent { .ehsContent {
margin: 0 auto; margin: 0 auto;
} }
.homePageSection {
margin-top: 1em;
}
.homePageSection + .homePageSection { .homePageSection + .homePageSection {
margin-top: .25em; margin-top: 1.75em;
} }
.sectionHeaderButton { .sectionHeaderButton {
@ -106,10 +109,6 @@
} }
} }
.firstListHeader + .sectionHeaderButton {
top: 3px;
}
@media all and (min-width: 500px) { @media all and (min-width: 500px) {
.ehsContent { .ehsContent {
@ -729,7 +728,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.libraryPanelHeader span { .libraryPanelHeader span {
color: #fff; color: #fff;
vertical-align: middle; vertical-align: middle;
font-weight: 300; font-weight: 400;
} }
.detailImageProgressContainer { .detailImageProgressContainer {

View file

@ -95,7 +95,7 @@
.libraryMenuButtonText { .libraryMenuButtonText {
color: #fff !important; color: #fff !important;
text-decoration: none; text-decoration: none;
font-weight: 300 !important; font-weight: 400 !important;
font-size: 15px; font-size: 15px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -212,7 +212,7 @@
} }
.selectedMediaFolder { .selectedMediaFolder {
background-color: #3388cc !important; background-color: #38c !important;
color: #fff !important; color: #fff !important;
} }

View file

@ -198,10 +198,6 @@
font-size: 16px; font-size: 16px;
} }
.channelTimeslotHeader .accentButton {
font-size: 15px;
}
.channelTimeslotHeader .timeslotHeaderInner { .channelTimeslotHeader .timeslotHeaderInner {
padding-top: .4em; padding-top: .4em;
} }
@ -230,7 +226,7 @@
padding: .35em .5em .5em; padding: .35em .5em .5em;
display: block; display: block;
text-decoration: none; text-decoration: none;
font-weight: 300 !important; font-weight: 400 !important;
color: #fff !important; color: #fff !important;
position: relative; position: relative;
} }
@ -242,7 +238,7 @@
.channelList { .channelList {
float: left; float: left;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 400;
} }
.programGrid { .programGrid {
@ -342,7 +338,7 @@
width: 6500px; width: 6500px;
} }
.channelList, .channelTimeslotHeader .accentButton { .channelList {
font-size: 14px; font-size: 14px;
} }

View file

@ -9,7 +9,7 @@
.btnNotificationsInner { .btnNotificationsInner {
color: #fff; color: #fff;
font-weight: 300; font-weight: 400;
display: none; display: none;
position: relative; position: relative;
top: -4px; top: -4px;

View file

@ -148,7 +148,7 @@
padding: 4px 0 3px 0; padding: 4px 0 3px 0;
text-indent: 50px; text-indent: 50px;
font-size: 16px; font-size: 16px;
font-family: Roboto; font-family: inherit;
outline: none; outline: none;
vertical-align: middle; vertical-align: middle;
width: 85%; width: 85%;

View file

@ -1,36 +1,282 @@
@font-face { /* cyrillic-ext */
@font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 100; font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/RobotoThin.woff) format('woff'); src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/roboto/ty9dfvLAziwdqQ2dHoyjphTbgVql8nDJpwnrE27mub0.woff2) format('woff2'), url(fonts/Roboto/RobotoThin.woff) format('woff');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
} }
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/roboto/frNV30OaYdlFRtH2VnZZdhTbgVql8nDJpwnrE27mub0.woff2) format('woff2'), url(fonts/Roboto/RobotoThin.woff) format('woff');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/roboto/gwVJDERN2Amz39wrSoZ7FxTbgVql8nDJpwnrE27mub0.woff2) format('woff2'), url(fonts/Roboto/RobotoThin.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/roboto/aZMswpodYeVhtRvuABJWvBTbgVql8nDJpwnrE27mub0.woff2) format('woff2'), url(fonts/Roboto/RobotoThin.woff) format('woff');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/roboto/VvXUGKZXbHtX_S_VCTLpGhTbgVql8nDJpwnrE27mub0.woff2) format('woff2'), url(fonts/Roboto/RobotoThin.woff) format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/roboto/e7MeVAyvogMqFwwl61PKhBTbgVql8nDJpwnrE27mub0.woff2) format('woff2'), url(fonts/Roboto/RobotoThin.woff) format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/roboto/2tsd397wLxj96qwHyNIkxPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(fonts/Roboto/RobotoThin.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(fonts/RobotoLight.woff) format('woff'); src: local('Roboto Light'), local('Roboto-Light'), url(fonts/roboto/0eC6fl06luXEYWpBSJvXCBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoLight.woff) format('woff');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
} }
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(fonts/roboto/Fl4y0QdOxyyTHEGMXX8kcRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoLight.woff) format('woff');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(fonts/roboto/-L14Jk06m6pUHB-5mXQQnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoLight.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(fonts/roboto/I3S1wsgSg9YCurV6PUkTORJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoLight.woff) format('woff');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(fonts/roboto/NYDWBdD4gIq26G5XYbHsFBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoLight.woff) format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(fonts/roboto/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoLight.woff) format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(fonts/roboto/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(fonts/Roboto/RobotoLight.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(fonts/RobotoRegular.woff) format('woff'); src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(fonts/Roboto/RobotoRegular.woff) format('woff');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
} }
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(fonts/Roboto/RobotoRegular.woff) format('woff');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(fonts/Roboto/RobotoRegular.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(fonts/Roboto/RobotoRegular.woff) format('woff');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(fonts/Roboto/RobotoRegular.woff) format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(fonts/roboto/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(fonts/Roboto/RobotoRegular.woff) format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(fonts/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(fonts/Roboto/RobotoRegular.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(fonts/RobotoMedium.woff) format('woff'); src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoMedium.woff) format('woff');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
} }
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoMedium.woff) format('woff');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoMedium.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoMedium.woff) format('woff');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoMedium.woff) format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(fonts/roboto/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoMedium.woff) format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(fonts/Roboto/RobotoMedium.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(fonts/RobotoBold.woff) format('woff'); src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/77FXFjRbGzN4aCrSFhlh3hJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoBold.woff) format('woff');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/isZ-wbCXNKAbnjo6_TwHThJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoBold.woff) format('woff');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/UX6i4JxQDm3fVTc1CPuwqhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoBold.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/jSN2CGVDbcVyCnfJfjSdfBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoBold.woff) format('woff');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/PwZc-YbIL414wB9rB1IAPRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoBold.woff) format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(fonts/roboto/97uahxiqZRoncBaCEI3aWxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(fonts/Roboto/RobotoBold.woff) format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(fonts/roboto/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(fonts/Roboto/RobotoBold.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
} }
/* latin */ /* latin */
@ -1099,46 +1345,6 @@ progress {
} }
} }
.accentButton {
display: inline-block;
background: rgba(51, 136, 204, .9);
border-radius: 1000px;
padding: 4px 10px;
color: #fff !important;
font-size: 13px;
font-weight: 400 !important;
text-decoration: none;
vertical-align: middle;
border: 0;
outline: 0;
cursor: pointer;
cursor: hand;
}
.accentButton-g {
background: #52B54B;
}
.accentButton:hover {
opacity: .5;
}
.accentButton:not(.accentButtonRight) .fa:not(.notext) {
margin-right: 7px;
}
h1 + .accentButton {
margin: 18px 0 0 20px;
}
.detailSectionHeader .accentButton {
font-size: 13px;
}
.accentButtonRight .fa:not(.notext) {
margin-left: 7px;
}
.dashboardFooter { .dashboardFooter {
margin-top: 50px; margin-top: 50px;
text-align: center; text-align: center;

View file

@ -4,7 +4,9 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <body>
<div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book" data-require="scripts/sections,scripts/indexpage"> <div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book" data-require="scripts/sections,scripts/indexpage,css!thirdparty/paper-button/paper-button-style">
<link rel="import" href="thirdparty/paper-button/paper-button.html">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabHome}</a> <a href="#" class="ui-btn-active">${TabHome}</a>

View file

@ -19,7 +19,7 @@
<div class="tvGuideHeader"> <div class="tvGuideHeader">
<div class="channelTimeslotHeader"> <div class="channelTimeslotHeader">
<div class="timeslotHeaderInner"> <div class="timeslotHeaderInner">
<a href="#popupConfig" data-rel="popup" class="accentButton" style="display:block;padding-left:5px;"><i class="fa fa-calendar"></i><span class="currentDate"></span></a> <a href="#popupConfig" data-rel="popup" style="display:block;padding-left:5px;color:#fff;text-decoration:none;font-weight:normal!important;padding:4px 10px 4px 0;"><i class="fa fa-calendar" style="margin-right:3px;"></i><span class="currentDate"></span></a>
</div> </div>
</div> </div>
<div class="timeslotHeaders hiddenScrollX"></div> <div class="timeslotHeaders hiddenScrollX"></div>

View file

@ -4,7 +4,9 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <body>
<div id="liveTvRecordingsPage" data-role="page" class="page libraryPage liveTvPage" data-contextname="${HeaderLiveTv}" data-require="scripts/livetvrecordings"> <div id="liveTvRecordingsPage" data-role="page" class="page libraryPage liveTvPage" data-contextname="${HeaderLiveTv}" data-require="scripts/livetvrecordings,css!thirdparty/paper-button/paper-button-style">
<link rel="import" href="thirdparty/paper-button/paper-button.html">
<div class="libraryViewNav"> <div class="libraryViewNav">
<a href="livetvsuggested.html">${TabSuggestions}</a> <a href="livetvsuggested.html">${TabSuggestions}</a>
<a href="livetvguide.html">${TabGuide}</a> <a href="livetvguide.html">${TabGuide}</a>
@ -23,7 +25,7 @@
<div id="latestRecordings" style="display: none;"> <div id="latestRecordings" style="display: none;">
<div> <div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestRecordings}</h1> <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestRecordings}</h1>
<a href="#" class="accentButton categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</a> <paper-button raised class="secondary mini categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
</div> </div>
<div class="recordingItems itemsContainer"></div> <div class="recordingItems itemsContainer"></div>
<br /> <br />

View file

@ -4,8 +4,10 @@
<title>${TitleSignIn}</title> <title>${TitleSignIn}</title>
</head> </head>
<body> <body>
<div id="loginPage" data-role="page" class="page standalonePage" data-theme="b" data-require="scripts/loginpage"> <div id="loginPage" data-role="page" class="page standalonePage" data-theme="b" data-require="scripts/loginpage,css!thirdparty/paper-button/paper-button-style">
<link rel="import" href="thirdparty/iron-icons/iron-icons.html">
<link rel="import" href="thirdparty/paper-button/paper-button.html">
<div data-role="content"> <div data-role="content">
<form class="manualLoginForm" style="display: none; text-align: center; margin: 0 auto;"> <form class="manualLoginForm" style="display: none; text-align: center; margin: 0 auto;">
@ -17,17 +19,14 @@
<label for="txtManualPassword" style="text-align: left;">${LabelPassword}</label> <label for="txtManualPassword" style="text-align: left;">${LabelPassword}</label>
<input type="password" name="txtManualPassword" id="txtManualPassword" placeholder="password" /> <input type="password" name="txtManualPassword" id="txtManualPassword" placeholder="password" />
<p> <button type="submit" data-icon="check" style="display:none;" class="btnSubmitLoginForm">
<button type="submit" data-icon="check"> ${ButtonSignIn}
${ButtonSignIn} </button>
</button> <button type="submit" data-role="none" class="clearButton">
</p> <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSignIn}</span></paper-button>
</button>
<p> <paper-button raised class="cancel block btnCancel" onclick="LoginPage.cancelLogin();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
<button type="button" data-icon="delete" onclick="LoginPage.cancelLogin();" class="btnCancel">
${ButtonCancel}
</button>
</p>
<br /> <br />
<br /> <br />
</form> </form>
@ -39,14 +38,12 @@
<br /> <br />
<div class="readOnlyContent" style="margin: 2em auto 0;"> <div class="readOnlyContent" style="margin: 2em auto 0;">
<a href="#" onclick="LoginPage.showManualForm($.mobile.activePage, true);" data-role="button" data-icon="lock">${ButtonManualLogin}</a> <paper-button raised class="cancel block" onclick="LoginPage.showManualForm(jQuery.mobile.activePage, true);"><iron-icon icon="lock"></iron-icon><span>${ButtonManualLogin}</span></paper-button>
</div> </div>
</div> </div>
<div class="readOnlyContent" style="margin: 0 auto 1em;"> <div class="readOnlyContent" style="margin: 0 auto 1em;">
<a href="forgotpassword.html" data-role="button" data-icon="info"> <paper-button raised class="cancel block btnForgotPassword" onclick="LoginPage.cancelLogin();"><iron-icon icon="info"></iron-icon><span>${ButtonForgotPassword}</span></paper-button>
${ButtonForgotPassword}
</a>
<p class="disclaimer" style="text-align: center; margin-top: 2em;"></p> <p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>

View file

@ -4,7 +4,9 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <body>
<div id="moviesRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="movie" data-require="scripts/moviesrecommended"> <div id="moviesRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,css!thirdparty/paper-button/paper-button-style">
<link rel="import" href="thirdparty/paper-button/paper-button.html">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabSuggestions}</a> <a href="#" class="ui-btn-active">${TabSuggestions}</a>
@ -21,7 +23,7 @@
<div id="resumableSection" style="display: none;" class="homePageSection"> <div id="resumableSection" style="display: none;" class="homePageSection">
<div> <div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1> <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
<a href="#" class="accentButton categorySyncButton" data-category="Resume"><i class="fa fa-refresh"></i>${ButtonSync}</a> <paper-button raised class="secondary mini categorySyncButton" data-category="Resume"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
</div> </div>
<div id="resumableItems" class="itemsContainer"> <div id="resumableItems" class="itemsContainer">
@ -31,7 +33,7 @@
<div class="homePageSection"> <div class="homePageSection">
<div> <div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1> <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1>
<a href="#" class="accentButton categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</a> <paper-button raised class="secondary mini categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
</div> </div>
<div id="recentlyAddedItems" class="itemsContainer"> <div id="recentlyAddedItems" class="itemsContainer">

View file

@ -197,7 +197,7 @@
} }
} }
$(document).on('pagebeforeshowready', ".page", function () { $(document).on('pageshowready', ".page", function () {
var page = this; var page = this;
@ -212,7 +212,10 @@
var parentId = $page.hasClass('globalBackdropPage') ? '' : LibraryMenu.getTopParentId(); var parentId = $page.hasClass('globalBackdropPage') ? '' : LibraryMenu.getTopParentId();
showBackdrop(type, parentId); // This is an artificial timeout, but we want to give priority to the regular data requests for the page
setTimeout(function () {
showBackdrop(type, parentId);
}, 100);
} else { } else {
$page.removeClass('backdropPage'); $page.removeClass('backdropPage');

View file

@ -193,6 +193,7 @@
} }
function supportInAppSignup() { function supportInAppSignup() {
return false;
return AppInfo.isNativeApp; return AppInfo.isNativeApp;
return AppInfo.isNativeApp || getWindowUrl().toLowerCase().indexOf('https') == 0; return AppInfo.isNativeApp || getWindowUrl().toLowerCase().indexOf('https') == 0;
} }
@ -232,6 +233,20 @@
} }
}); });
$('.btnCancelSignup', page).on('click', function () {
history.back();
});
$('.btnCancelManualServer', page).on('click', function () {
history.back();
});
$('.btnWelcomeNext', page).on('click', function () {
Dashboard.navigate('connectlogin.html?mode=connect');
});
}).on('pagebeforeshowready', "#connectLoginPage", function () { }).on('pagebeforeshowready', "#connectLoginPage", function () {
var page = this; var page = this;
@ -253,7 +268,6 @@
}).on('pageshowready', "#connectLoginPage", function () { }).on('pageshowready', "#connectLoginPage", function () {
var page = this; var page = this;
loadPage(page); loadPage(page);
}); });
@ -273,7 +287,6 @@
handleConnectionResult(page, result); handleConnectionResult(page, result);
}).fail(function () { }).fail(function () {
handleConnectionResult(page, { handleConnectionResult(page, {
State: MediaBrowser.ConnectionState.Unavailable State: MediaBrowser.ConnectionState.Unavailable
}); });

View file

@ -591,3 +591,12 @@ function ticks_to_human(str) {
}); });
})(); })();
// This only exists because the polymer elements get distorted when using regular jquery show/hide
$.fn.visible = function(visible) {
if (visible) {
return this.removeClass('hide');
}
return this.addClass('hide');
};

View file

@ -23,10 +23,7 @@
var latestMediElem = $('.section0', page); var latestMediElem = $('.section0', page);
Sections.loadRecentlyAdded(latestMediElem, user, context).done(function () { Sections.loadRecentlyAdded(latestMediElem, user, context);
$('h1', latestMediElem).addClass('firstListHeader');
});
Sections.loadLatestLiveTvRecordings($(".section1", page), userId); Sections.loadLatestLiveTvRecordings($(".section1", page), userId);
Sections.loadLatestChannelItems($(".section2", page), userId); Sections.loadLatestChannelItems($(".section2", page), userId);
} }

View file

@ -992,10 +992,17 @@
getPostersPerRow: function (screenWidth) { getPostersPerRow: function (screenWidth) {
var cache = true;
function getValue(shape) { function getValue(shape) {
var div = $('<div class="card ' + shape + 'Card"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body); var div = $('<div class="card ' + shape + 'Card"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
var width = screenWidth / $('.cardImage', div).innerWidth(); var innerWidth = $('.cardImage', div).innerWidth();
if (!innerWidth || isNaN(innerWidth)) {
cache = false;
innerWidth = Math.min(400, screenWidth / 2);
}
var width = screenWidth / innerWidth;
div.remove(); div.remove();
return Math.floor(width); return Math.floor(width);
} }
@ -1006,6 +1013,7 @@
var currentShape = LibraryBrowser.shapes[i]; var currentShape = LibraryBrowser.shapes[i];
info[currentShape] = getValue(currentShape); info[currentShape] = getValue(currentShape);
} }
info.cache = cache;
return info; return info;
}, },
@ -1025,8 +1033,11 @@
} }
var result = LibraryBrowser.getPosterViewInfoInternal(screenWidth); var result = LibraryBrowser.getPosterViewInfoInternal(screenWidth);
result.screenWidth = screenWidth;
cachedResults.push(result); if (result.cache) {
cachedResults.push(result);
}
return result; return result;
}, },
@ -1039,7 +1050,7 @@
result.screenWidth = screenWidth; result.screenWidth = screenWidth;
if (!AppInfo.hasLowImageBandwidth) { if (!AppInfo.hasLowImageBandwidth) {
screenWidth *= 1.25; screenWidth *= 1.2;
} }
var roundTo = 100; var roundTo = 100;
@ -1057,6 +1068,8 @@
result[currentShape + 'Width'] = Math.round(shapeWidth); result[currentShape + 'Width'] = Math.round(shapeWidth);
} }
result.cache = imagesPerRow.cache;
return result; return result;
}, },
@ -1785,7 +1798,7 @@
throw new Error("null item passed into getPosterViewDisplayName"); throw new Error("null item passed into getPosterViewDisplayName");
} }
var name = item.EpisodeTitle || item.Name; var name = item.EpisodeTitle || item.Name || '';
if (item.Type == "TvChannel") { if (item.Type == "TvChannel") {

View file

@ -221,4 +221,8 @@ $(document).on('pageinitdepends', "#loginPage", function () {
$('.manualLoginForm', page).off('submit', LoginPage.onManualSubmit).on('submit', LoginPage.onManualSubmit); $('.manualLoginForm', page).off('submit', LoginPage.onManualSubmit).on('submit', LoginPage.onManualSubmit);
$('.btnForgotPassword', page).on('click', function () {
Dashboard.navigate('forgotpassword.html');
});
}).on('pageshowready', "#loginPage", LoginPage.onPageShow); }).on('pageshowready', "#loginPage", LoginPage.onPageShow);

View file

@ -154,7 +154,7 @@
html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate('HeaderLatestMedia') + '</h1>'; html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate('HeaderLatestMedia') + '</h1>';
if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) { if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
html += '<a href="mypreferencesdisplay.html" class="accentButton"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</a>'; html += '<a href="mypreferencesdisplay.html" class="clearLink" style="margin-left:2em;"><paper-button raised class="secondary mini"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</paper-button></a>';
} }
html += '</div>'; html += '</div>';
@ -230,13 +230,13 @@
if (items.length) { if (items.length) {
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader'; var cssClass = index !== 0 ? 'listHeader' : 'listHeader';
html += '<div>'; html += '<div>';
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderMyMedia') + '</h1>'; html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderMyMedia') + '</h1>';
if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) { if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
html += '<a href="mypreferencesdisplay.html" class="accentButton"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</a>'; html += '<a href="mypreferencesdisplay.html" class="clearLink" style="margin-left:2em;"><paper-button raised class="secondary mini"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</paper-button></a>';
} }
html += '</div>'; html += '</div>';
@ -382,7 +382,7 @@
if (result.Items.length) { if (result.Items.length) {
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader'; var cssClass = index !== 0 ? 'listHeader' : 'listHeader';
html += '<div>'; html += '<div>';
var text = Globalize.translate('HeaderLatestFromChannel').replace('{0}', channel.Name); var text = Globalize.translate('HeaderLatestFromChannel').replace('{0}', channel.Name);
@ -421,7 +421,7 @@
if (result.Items.length) { if (result.Items.length) {
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader'; var cssClass = index !== 0 ? 'listHeader' : 'listHeader';
html += '<div>'; html += '<div>';
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderLatestTvRecordings') + '</h1>'; html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderLatestTvRecordings') + '</h1>';

View file

@ -1270,12 +1270,16 @@ var Dashboard = {
html += '<h1 class="pageTitle" style="display:inline-block;">' + (document.title || '&nbsp;') + '</h1>'; html += '<h1 class="pageTitle" style="display:inline-block;">' + (document.title || '&nbsp;') + '</h1>';
if (helpUrl) { if (helpUrl) {
html += '<a href="' + helpUrl + '" target="_blank" class="accentButton accentButton-g" style="margin-top:-10px;"><i class="fa fa-info-circle"></i>' + Globalize.translate('ButtonHelp') + '</a>'; html += '<a href="' + helpUrl + '" target="_blank" class="clearLink" style="margin-top:-10px;display:inline-block;vertical-align:middle;margin-left:1em;"><paper-button raised class="secondary mini"><i class="fa fa-info-circle"></i>'+Globalize.translate('ButtonHelp')+'</paper-button></a>';
} }
html += '</div>'; html += '</div>';
$(parent).prepend(html); $(parent).prepend(html);
if (helpUrl) {
require(['css!thirdparty/paper-button/paper-button-style']);
}
}, },
setPageTitle: function (title) { setPageTitle: function (title) {
@ -1611,7 +1615,7 @@ var AppInfo = {};
else { else {
if (!$.browser.tv) { if (!$.browser.tv) {
AppInfo.enableHeadRoom = true; //AppInfo.enableHeadRoom = true;
} }
} }
@ -1725,10 +1729,6 @@ var AppInfo = {};
function onDocumentReady() { function onDocumentReady() {
if (AppInfo.enableBottomTabs) {
$(document.body).addClass('bottomSecondaryNav');
}
if (AppInfo.isTouchPreferred) { if (AppInfo.isTouchPreferred) {
$(document.body).addClass('touch'); $(document.body).addClass('touch');
} }
@ -1982,6 +1982,15 @@ var AppInfo = {};
$.extend(AppInfo, Dashboard.getAppInfo(appName, deviceId, deviceName)); $.extend(AppInfo, Dashboard.getAppInfo(appName, deviceId, deviceName));
// Do these now to prevent a flash of content
if (AppInfo.isNativeApp && $.browser.safari) {
require(['css!themes/ios']);
}
if (AppInfo.enableBottomTabs) {
$(document.body).addClass('bottomSecondaryNav');
}
if (Dashboard.isConnectMode()) { if (Dashboard.isConnectMode()) {
require(['appstorage'], function () { require(['appstorage'], function () {
@ -1999,10 +2008,12 @@ var AppInfo = {};
} else { } else {
createConnectionManager(capabilities); createConnectionManager(capabilities);
Dashboard.initPromiseDone = true;
deferred.resolve();
$(onDocumentReady); $(function() {
onDocumentReady();
Dashboard.initPromiseDone = true;
deferred.resolve();
});
} }
} }

View file

@ -224,10 +224,8 @@
html += '<div style="margin:1em 0 1.5em;">'; html += '<div style="margin:1em 0 1.5em;">';
html += '<h1 style="margin: 0;display:inline-block;vertical-align:middle;">' + Globalize.translate('SyncMedia') + '</h1>'; html += '<h1 style="margin: 0;display:inline-block;vertical-align:middle;">' + Globalize.translate('SyncMedia') + '</h1>';
html += '<a class="accentButton accentButton-g" style="display:inline-block;vertical-align:middle;margin-top:0;margin-left: 20px;" href="https://github.com/MediaBrowser/Wiki/wiki/Sync" target="_blank">';
html += '<i class="fa fa-info-circle"></i>'; html += '<a href="https://github.com/MediaBrowser/Wiki/wiki/Sync" target="_blank" class="clearLink" style="margin-top:0;display:inline-block;vertical-align:middle;margin-left:1em;"><paper-button raised class="secondary mini"><i class="fa fa-info-circle"></i>' + Globalize.translate('ButtonHelp') + '</paper-button></a>';
html += Globalize.translate('ButtonHelp');
html += '</a>';
html += '</div>'; html += '</div>';
html += '<div class="formFields"></div>'; html += '<div class="formFields"></div>';
@ -242,6 +240,7 @@
html += '</div>'; html += '</div>';
$(document.body).append(html); $(document.body).append(html);
require(['css!thirdparty/paper-button/paper-button-style']);
var elem = $('.syncPanel').panel({}).trigger('create').panel("open").on("panelclose", function () { var elem = $('.syncPanel').panel({}).trigger('create').panel("open").on("panelclose", function () {
$(this).off("panelclose").remove(); $(this).off("panelclose").remove();
@ -379,12 +378,7 @@
Dashboard.getCurrentUser().done(function (user) { Dashboard.getCurrentUser().done(function (user) {
if (user.Policy.EnableSync) { $('.categorySyncButton', page).visible(user.Policy.EnableSync);
$('.categorySyncButton', page).show();
} else {
$('.categorySyncButton', page).hide();
}
}); });
} }

View file

@ -28,7 +28,6 @@
$('.globalNav', page).hide(); $('.globalNav', page).hide();
$('.scopedContent', page).show(); $('.scopedContent', page).show();
context = 'tv'; context = 'tv';
$('.nextUpHeader', page).removeClass('firstListHeader');
loadResume(page); loadResume(page);
@ -36,7 +35,6 @@
$('.scopedLibraryViewNav', page).hide(); $('.scopedLibraryViewNav', page).hide();
$('.globalNav', page).show(); $('.globalNav', page).show();
$('.scopedContent', page).hide(); $('.scopedContent', page).hide();
$('.nextUpHeader', page).addClass('firstListHeader');
} }
loadNextUp(page, context || 'home-nextup'); loadNextUp(page, context || 'home-nextup');
@ -144,7 +142,6 @@
$('#resumableSection', page).show(); $('#resumableSection', page).show();
} else { } else {
$('#resumableSection', page).hide(); $('#resumableSection', page).hide();
$('.nextUpHeader', page).addClass('firstListHeader');
} }
var view = getResumeView(); var view = getResumeView();

View file

@ -1,6 +1,20 @@
(function ($, document) { (function ($, document) {
$(document).on('pageshowready', "#tvUpcomingPage", function () { $(document).on('pagebeforeshowready', "#tvUpcomingPage", function () {
var page = this;
if (LibraryMenu.getTopParentId()) {
$('.scopedLibraryViewNav', page).show();
$('.globalNav', page).hide();
} else {
$('.scopedLibraryViewNav', page).hide();
$('.globalNav', page).show();
}
}).on('pageshowready', "#tvUpcomingPage", function () {
var page = this; var page = this;

View file

@ -4,7 +4,9 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <body>
<div id="selectServerPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-theme="b" data-require="scripts/selectserver"> <div id="selectServerPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-theme="b" data-require="scripts/selectserver,css!thirdparty/paper-button/paper-button-style">
<link rel="import" href="thirdparty/paper-button/paper-button.html">
<div data-role="content"> <div data-role="content">
@ -12,10 +14,7 @@
<div style="margin:1em 0 .5em;padding-left:5px;"> <div style="margin:1em 0 .5em;padding-left:5px;">
<h1 style="display:inline-block;vertical-align:middle;margin: 0;">${HeaderSelectServer}</h1> <h1 style="display:inline-block;vertical-align:middle;margin: 0;">${HeaderSelectServer}</h1>
<a class="accentButton accentButton-g" style="display:inline-block;vertical-align:middle;margin-top:0;" href="https://github.com/MediaBrowser/Wiki/wiki/Emby%20Connect" target="_blank"> <a href="https://github.com/MediaBrowser/Wiki/wiki/Emby%20Connect" target="_blank" class="clearLink" style="margin-top:0;display:inline-block;vertical-align:middle;margin-left:1em;"><paper-button raised class="secondary mini"><i class="fa fa-info-circle"></i>${ButtonHelp}</paper-button></a>
<i class="fa fa-info-circle"></i>
${ButtonHelp}
</a>
</div> </div>
<div class="serverList"></div> <div class="serverList"></div>

View file

@ -0,0 +1,91 @@
body {
font-family: Helvetica Neue;
}
.viewMenuBar, .libraryViewNav, .ui-page-theme-b {
background-color: #1c1c1c;
}
.libraryViewNav a {
font-weight: 400;
text-transform: none;
color: #ccc !important;
}
.libraryViewNav .ui-btn-active {
border-bottom-color: transparent;
color: #2ad !important;
}
.libraryViewNav {
border-top: 1px solid #333;
font-size: 12px;
height: 47px !important;
}
.viewMenuBar {
border-bottom: 1px solid #333;
}
.barsMenuButton .fa {
color: #2ad !important;
}
.btn, .btn-large {
font-family: Helvetica Neue !important;
}
.pageTitle {
font-family: Helvetica Neue;
}
.ui-btn {
font-family: Helvetica Neue;
}
.ui-loader h1 {
font-family: Helvetica Neue;
}
h1, h1 a {
font-weight: 400 !important;
}
.btnNotificationsInner {
font-weight: 400;
}
.channelList {
font-weight: 400;
}
.channelHeaderCellInner {
font-weight: 400;
}
.librarySidebarLinks a {
font-weight: 400 !important;
}
.libraryMenuButtonText {
font-weight: 500 !important;
position: relative;
top: 2px;
}
.libraryPanelHeader span {
font-weight: 400;
}
.visualCardBox {
background: none !important;
-moz-box-shadow: none;
-ms-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.visualCardBox .outerCardFooter {
padding: 0;
}

View file

@ -1,15 +1,13 @@
(function () { (function () {
var currentPairingDeviceId; function connectSDKPlayer() {
var currentPairedDeviceId;
var currentDevice;
var PlayerName = "ConnectSDK";
function connectPlayer() {
var self = this; var self = this;
var PlayerName = "ConnectSDK";
var currentDevice;
var currentDeviceId;
// MediaController needs this // MediaController needs this
self.name = PlayerName; self.name = PlayerName;
@ -90,14 +88,8 @@
return; return;
} }
playInternal(options.items);
};
function playInternal(items, serverAddress) {
playItemInternal(items[0], null, serverAddress); playItemInternal(items[0], null, serverAddress);
};
}
function playItemInternal(items, startPosition) { function playItemInternal(items, startPosition) {
@ -149,13 +141,16 @@
//}); //});
} }
self.unpause = function () { self.unpause = function () {
currentDevice.getMediaControl().play(); if (currentDevice) {
currentDevice.getMediaControl().pause();
}
}; };
self.pause = function () { self.pause = function () {
currentDevice.getMediaControl().pause(); if (currentDevice) {
currentDevice.getMediaControl().pause();
}
}; };
self.shuffle = function (id) { self.shuffle = function (id) {
@ -191,36 +186,48 @@
}; };
self.canQueueMediaType = function (mediaType) { self.canQueueMediaType = function (mediaType) {
return false; return mediaType == "Audio";
}; };
self.queue = function (options) { self.queue = function (options) {
self.playWithCommnd(options, 'PlayLast');
}; };
self.queueNext = function (options) { self.queueNext = function (options) {
self.playWithCommand(options, 'PlayNext');
}; };
self.stop = function () { self.stop = function () {
currentDevice.getMediaControl().stop(); if (currentDevice) {
currentDevice.getMediaControl().stop();
}
}; };
self.displayContent = function (options) { self.displayContent = function (options) {
// TODO
}; };
self.mute = function () { self.mute = function () {
currentDevice.getVolumeControl().setMute(true); if (currentDevice) {
currentDevice.getVolumeControl().setMute(true);
}
}; };
self.unMute = function () { self.unMute = function () {
currentDevice.getVolumeControl().setMute(false); self.setVolume(getCurrentVolume() + 2);
}; };
self.toggleMute = function () { self.toggleMute = function () {
var volumeControl = currentDevice.getVolumeControl(); var state = self.lastPlayerData || {};
state = state.PlayState || {};
volumeControl.setMute(!volumeControl.getMute()); if (state.IsMuted) {
self.unMute();
} else {
self.mute();
}
}; };
self.getDeviceProfile = function () { self.getDeviceProfile = function () {
@ -358,7 +365,6 @@
return profile; return profile;
}; };
function getBaseTargetInfo() { function getBaseTargetInfo() {
var target = {}; var target = {};
@ -408,18 +414,27 @@
}; };
self.seek = function (position) { self.seek = function (position) {
position = parseInt(position);
position = position / 10000000;
// TODO
}; };
self.setAudioStreamIndex = function (index) { self.setAudioStreamIndex = function (index) {
// TODO
}; };
self.setSubtitleStreamIndex = function (index) { self.setSubtitleStreamIndex = function (index) {
// TODO
}; };
self.nextTrack = function () { self.nextTrack = function () {
// TODO
}; };
self.previousTrack = function () { self.previousTrack = function () {
// TODO
}; };
self.beginPlayerUpdates = function () { self.beginPlayerUpdates = function () {
@ -439,12 +454,16 @@
self.volumeDown = function () { self.volumeDown = function () {
currentDevice.getVolumeControl().volumeDown(); if (currentDevice) {
currentDevice.getVolumeControl().volumeDown();
}
}; };
self.volumeUp = function () { self.volumeUp = function () {
currentDevice.getVolumeControl().volumeUp(); if (currentDevice) {
currentDevice.getVolumeControl().volumeUp();
}
}; };
self.setVolume = function (vol) { self.setVolume = function (vol) {
@ -452,7 +471,9 @@
vol = Math.min(vol, 100); vol = Math.min(vol, 100);
vol = Math.max(vol, 0); vol = Math.max(vol, 0);
currentDevice.getVolumeControl().setVolume(vol / 100); if (currentDevice) {
currentDevice.getVolumeControl().setVolume(vol / 100);
}
}; };
self.getPlayerState = function () { self.getPlayerState = function () {
@ -477,27 +498,37 @@
return data; return data;
}; };
function cleanupSession() { function handleSessionDisconnect() {
console.log("session disconnected");
if (currentDevice != null) { cleanupSession();
currentDevice.off("ready"); MediaController.removeActivePlayer(PlayerName);
currentDevice.off("disconnect");
currentDevice.disconnect();
}
currentPairedDeviceId = null;
currentDevice = null;
} }
function onDeviceReady(device, deferred) { function cleanupSession() {
if (currentPairingDeviceId != device.getId()) { }
console.log('device ready fired for a different device. ignoring.');
return; function launchWebApp(device) {
if (currentDevice) {
cleanupSession();
} }
deferred.resolve(); console.log('session.connect succeeded');
MediaController.setActivePlayer(PlayerName, convertDeviceToTarget(device));
currentDevice = device;
currentDeviceId = device.getId();
}
function onDeviceReady(device) {
device.off("ready");
console.log('creating webAppSession');
launchWebApp(device);
} }
self.tryPair = function (target) { self.tryPair = function (target) {
@ -522,29 +553,23 @@
self.tryPairWithDevice = function (device, deferred) { self.tryPairWithDevice = function (device, deferred) {
var deviceId = device.getId(); console.log('Will attempt to connect to Connect Device');
currentPairingDeviceId = deviceId;
console.log('Will attempt to connect to Connect device'); device.on("disconnect", function () {
device.off("ready");
Dashboard.showModalLoadingMsg(); device.off("disconnect");
setTimeout(Dashboard.hideModalLoadingMsg, 3000); });
if (device.isReady()) { if (device.isReady()) {
console.log('Device is already ready, calling onDeviceReady'); console.log('Device is already ready, calling onDeviceReady');
onDeviceReady(device, deferred); onDeviceReady(device);
} else { } else {
console.log('Binding device ready handler'); console.log('Binding device ready handler');
device.on("ready", function () { device.on("ready", function () {
console.log('device.ready fired'); console.log('device.ready fired');
onDeviceReady(device, deferred); onDeviceReady(device);
});
device.on("disconnect", function () {
device.off("ready");
device.off("disconnect");
}); });
console.log('Calling device.connect'); console.log('Calling device.connect');
@ -554,22 +579,32 @@
$(MediaController).on('playerchange', function (e, newPlayer, newTarget) { $(MediaController).on('playerchange', function (e, newPlayer, newTarget) {
if (currentPairedDeviceId) { if (currentDevice) {
if (newTarget.id != currentPairedDeviceId) { if (newTarget.id != currentDeviceId) {
if (currentDevice) { if (currentDevice) {
console.log('Disconnecting from connect device'); console.log('Disconnecting from connect device');
cleanupSession(); //currentDevice.disconnect();
currentDevice = null;
currentDeviceId = null;
} }
} }
} }
}); });
function onResume() {
var deviceId = currentDeviceId;
if (deviceId) {
self.tryPair({
id: deviceId
});
}
}
document.addEventListener("resume", onResume, false);
} }
function initSdk() { MediaController.registerPlayer(new connectSDKPlayer());
MediaController.registerPlayer(new connectPlayer());
}
initSdk();
})(); })();

View file

@ -0,0 +1,421 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<script>
(function() {
'use strict';
/**
* Chrome uses an older version of DOM Level 3 Keyboard Events
*
* Most keys are labeled as text, but some are Unicode codepoints.
* Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/keyset.html#KeySet-Set
*/
var KEY_IDENTIFIER = {
'U+0009': 'tab',
'U+001B': 'esc',
'U+0020': 'space',
'U+002A': '*',
'U+0030': '0',
'U+0031': '1',
'U+0032': '2',
'U+0033': '3',
'U+0034': '4',
'U+0035': '5',
'U+0036': '6',
'U+0037': '7',
'U+0038': '8',
'U+0039': '9',
'U+0041': 'a',
'U+0042': 'b',
'U+0043': 'c',
'U+0044': 'd',
'U+0045': 'e',
'U+0046': 'f',
'U+0047': 'g',
'U+0048': 'h',
'U+0049': 'i',
'U+004A': 'j',
'U+004B': 'k',
'U+004C': 'l',
'U+004D': 'm',
'U+004E': 'n',
'U+004F': 'o',
'U+0050': 'p',
'U+0051': 'q',
'U+0052': 'r',
'U+0053': 's',
'U+0054': 't',
'U+0055': 'u',
'U+0056': 'v',
'U+0057': 'w',
'U+0058': 'x',
'U+0059': 'y',
'U+005A': 'z',
'U+007F': 'del'
};
/**
* Special table for KeyboardEvent.keyCode.
* KeyboardEvent.keyIdentifier is better, and KeyBoardEvent.key is even better
* than that.
*
* Values from: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.keyCode#Value_of_keyCode
*/
var KEY_CODE = {
9: 'tab',
13: 'enter',
27: 'esc',
33: 'pageup',
34: 'pagedown',
35: 'end',
36: 'home',
32: 'space',
37: 'left',
38: 'up',
39: 'right',
40: 'down',
46: 'del',
106: '*'
};
/**
* MODIFIER_KEYS maps the short name for modifier keys used in a key
* combo string to the property name that references those same keys
* in a KeyboardEvent instance.
*/
var MODIFIER_KEYS = {
shift: 'shiftKey',
ctrl: 'ctrlKey',
alt: 'altKey',
meta: 'metaKey'
};
/**
* KeyboardEvent.key is mostly represented by printable character made by
* the keyboard, with unprintable keys labeled nicely.
*
* However, on OS X, Alt+char can make a Unicode character that follows an
* Apple-specific mapping. In this case, we
* fall back to .keyCode.
*/
var KEY_CHAR = /[a-z0-9*]/;
/**
* Matches a keyIdentifier string.
*/
var IDENT_CHAR = /U\+/;
/**
* Matches arrow keys in Gecko 27.0+
*/
var ARROW_KEY = /^arrow/;
/**
* Matches space keys everywhere (notably including IE10's exceptional name
* `spacebar`).
*/
var SPACE_KEY = /^space(bar)?/;
function transformKey(key) {
var validKey = '';
if (key) {
var lKey = key.toLowerCase();
if (lKey.length == 1) {
if (KEY_CHAR.test(lKey)) {
validKey = lKey;
}
} else if (ARROW_KEY.test(lKey)) {
validKey = lKey.replace('arrow', '');
} else if (SPACE_KEY.test(lKey)) {
validKey = 'space';
} else if (lKey == 'multiply') {
// numpad '*' can map to Multiply on IE/Windows
validKey = '*';
} else {
validKey = lKey;
}
}
return validKey;
}
function transformKeyIdentifier(keyIdent) {
var validKey = '';
if (keyIdent) {
if (IDENT_CHAR.test(keyIdent)) {
validKey = KEY_IDENTIFIER[keyIdent];
} else {
validKey = keyIdent.toLowerCase();
}
}
return validKey;
}
function transformKeyCode(keyCode) {
var validKey = '';
if (Number(keyCode)) {
if (keyCode >= 65 && keyCode <= 90) {
// ascii a-z
// lowercase is 32 offset from uppercase
validKey = String.fromCharCode(32 + keyCode);
} else if (keyCode >= 112 && keyCode <= 123) {
// function keys f1-f12
validKey = 'f' + (keyCode - 112);
} else if (keyCode >= 48 && keyCode <= 57) {
// top 0-9 keys
validKey = String(48 - keyCode);
} else if (keyCode >= 96 && keyCode <= 105) {
// num pad 0-9
validKey = String(96 - keyCode);
} else {
validKey = KEY_CODE[keyCode];
}
}
return validKey;
}
function normalizedKeyForEvent(keyEvent) {
// fall back from .key, to .keyIdentifier, to .keyCode, and then to
// .detail.key to support artificial keyboard events
return transformKey(keyEvent.key) ||
transformKeyIdentifier(keyEvent.keyIdentifier) ||
transformKeyCode(keyEvent.keyCode) ||
transformKey(keyEvent.detail.key) || '';
}
function keyComboMatchesEvent(keyCombo, keyEvent) {
return normalizedKeyForEvent(keyEvent) === keyCombo.key &&
!!keyEvent.shiftKey === !!keyCombo.shiftKey &&
!!keyEvent.ctrlKey === !!keyCombo.ctrlKey &&
!!keyEvent.altKey === !!keyCombo.altKey &&
!!keyEvent.metaKey === !!keyCombo.metaKey;
}
function parseKeyComboString(keyComboString) {
return keyComboString.split('+').reduce(function(parsedKeyCombo, keyComboPart) {
var eventParts = keyComboPart.split(':');
var keyName = eventParts[0];
var event = eventParts[1];
if (keyName in MODIFIER_KEYS) {
parsedKeyCombo[MODIFIER_KEYS[keyName]] = true;
} else {
parsedKeyCombo.key = keyName;
parsedKeyCombo.event = event || 'keydown';
}
return parsedKeyCombo;
}, {
combo: keyComboString.split(':').shift()
});
}
function parseEventString(eventString) {
return eventString.split(' ').map(function(keyComboString) {
return parseKeyComboString(keyComboString);
});
}
/**
* `Polymer.IronA11yKeysBehavior` provides a normalized interface for processing
* keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
* The element takes care of browser differences with respect to Keyboard events
* and uses an expressive syntax to filter key presses.
*
* Use the `keyBindings` prototype property to express what combination of keys
* will trigger the event to fire.
*
* Use the `key-event-target` attribute to set up event handlers on a specific
* node.
* The `keys-pressed` event will fire when one of the key combinations set with the
* `keys` property is pressed.
*
* @demo demo/index.html
* @polymerBehavior IronA11yKeysBehavior
*/
Polymer.IronA11yKeysBehavior = {
properties: {
/**
* The HTMLElement that will be firing relevant KeyboardEvents.
*/
keyEventTarget: {
type: Object,
value: function() {
return this;
}
},
_boundKeyHandlers: {
type: Array,
value: function() {
return [];
}
},
// We use this due to a limitation in IE10 where instances will have
// own properties of everything on the "prototype".
_imperativeKeyBindings: {
type: Object,
value: function() {
return {};
}
}
},
observers: [
'_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)'
],
keyBindings: {},
registered: function() {
this._prepKeyBindings();
},
attached: function() {
this._listenKeyEventListeners();
},
detached: function() {
this._unlistenKeyEventListeners();
},
/**
* Can be used to imperatively add a key binding to the implementing
* element. This is the imperative equivalent of declaring a keybinding
* in the `keyBindings` prototype property.
*/
addOwnKeyBinding: function(eventString, handlerName) {
this._imperativeKeyBindings[eventString] = handlerName;
this._prepKeyBindings();
this._resetKeyEventListeners();
},
/**
* When called, will remove all imperatively-added key bindings.
*/
removeOwnKeyBindings: function() {
this._imperativeKeyBindings = {};
this._prepKeyBindings();
this._resetKeyEventListeners();
},
keyboardEventMatchesKeys: function(event, eventString) {
var keyCombos = parseEventString(eventString);
var index;
for (index = 0; index < keyCombos.length; ++index) {
if (keyComboMatchesEvent(keyCombos[index], event)) {
return true;
}
}
return false;
},
_collectKeyBindings: function() {
var keyBindings = this.behaviors.map(function(behavior) {
return behavior.keyBindings;
});
if (keyBindings.indexOf(this.keyBindings) === -1) {
keyBindings.push(this.keyBindings);
}
return keyBindings;
},
_prepKeyBindings: function() {
this._keyBindings = {};
this._collectKeyBindings().forEach(function(keyBindings) {
for (var eventString in keyBindings) {
this._addKeyBinding(eventString, keyBindings[eventString]);
}
}, this);
for (var eventString in this._imperativeKeyBindings) {
this._addKeyBinding(eventString, this._imperativeKeyBindings[eventString]);
}
},
_addKeyBinding: function(eventString, handlerName) {
parseEventString(eventString).forEach(function(keyCombo) {
this._keyBindings[keyCombo.event] =
this._keyBindings[keyCombo.event] || [];
this._keyBindings[keyCombo.event].push([
keyCombo,
handlerName
]);
}, this);
},
_resetKeyEventListeners: function() {
this._unlistenKeyEventListeners();
if (this.isAttached) {
this._listenKeyEventListeners();
}
},
_listenKeyEventListeners: function() {
Object.keys(this._keyBindings).forEach(function(eventName) {
var keyBindings = this._keyBindings[eventName];
var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings);
this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyHandler]);
this.keyEventTarget.addEventListener(eventName, boundKeyHandler);
}, this);
},
_unlistenKeyEventListeners: function() {
var keyHandlerTuple;
var keyEventTarget;
var eventName;
var boundKeyHandler;
while (this._boundKeyHandlers.length) {
// My kingdom for block-scope binding and destructuring assignment..
keyHandlerTuple = this._boundKeyHandlers.pop();
keyEventTarget = keyHandlerTuple[0];
eventName = keyHandlerTuple[1];
boundKeyHandler = keyHandlerTuple[2];
keyEventTarget.removeEventListener(eventName, boundKeyHandler);
}
},
_onKeyBindingEvent: function(keyBindings, event) {
keyBindings.forEach(function(keyBinding) {
var keyCombo = keyBinding[0];
var handlerName = keyBinding[1];
if (!event.defaultPrevented && keyComboMatchesEvent(keyCombo, event)) {
this._triggerKeyHandler(keyCombo, handlerName, event);
}
}, this);
},
_triggerKeyHandler: function(keyCombo, handlerName, keyboardEvent) {
var detail = Object.create(keyCombo);
detail.keyboardEvent = keyboardEvent;
this[handlerName].call(this, new CustomEvent(keyCombo.event, {
detail: detail
}));
}
};
})();
</script>

View file

@ -0,0 +1,186 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="iron-control-state.html">
<script>
/**
* @demo demo/index.html
* @polymerBehavior
*/
Polymer.IronButtonStateImpl = {
properties: {
/**
* If true, the user is currently holding down the button.
*/
pressed: {
type: Boolean,
readOnly: true,
value: false,
reflectToAttribute: true,
observer: '_pressedChanged'
},
/**
* If true, the button toggles the active state with each tap or press
* of the spacebar.
*/
toggles: {
type: Boolean,
value: false,
reflectToAttribute: true
},
/**
* If true, the button is a toggle and is currently in the active state.
*/
active: {
type: Boolean,
value: false,
notify: true,
reflectToAttribute: true,
observer: '_activeChanged'
},
/**
* True if the element is currently being pressed by a "pointer," which
* is loosely defined as mouse or touch input (but specifically excluding
* keyboard input).
*/
pointerDown: {
type: Boolean,
readOnly: true,
value: false
},
/**
* True if the input device that caused the element to receive focus
* was a keyboard.
*/
receivedFocusFromKeyboard: {
type: Boolean,
readOnly: true
}
},
listeners: {
down: '_downHandler',
up: '_upHandler',
tap: '_tapHandler'
},
observers: [
'_detectKeyboardFocus(focused)'
],
keyBindings: {
'enter:keydown': '_asyncClick',
'space:keydown': '_spaceKeyDownHandler',
'space:keyup': '_spaceKeyUpHandler',
},
_tapHandler: function() {
if (this.toggles) {
// a tap is needed to toggle the active state
this._userActivate(!this.active);
} else {
this.active = false;
}
},
_detectKeyboardFocus: function(focused) {
this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
},
// to emulate native checkbox, (de-)activations from a user interaction fire
// 'change' events
_userActivate: function(active) {
this.active = active;
this.fire('change');
},
_downHandler: function() {
this._setPointerDown(true);
this._setPressed(true);
this._setReceivedFocusFromKeyboard(false);
},
_upHandler: function() {
this._setPointerDown(false);
this._setPressed(false);
},
_spaceKeyDownHandler: function(event) {
var keyboardEvent = event.detail.keyboardEvent;
keyboardEvent.preventDefault();
keyboardEvent.stopImmediatePropagation();
this._setPressed(true);
},
_spaceKeyUpHandler: function() {
if (this.pressed) {
this._asyncClick();
}
this._setPressed(false);
},
// trigger click asynchronously, the asynchrony is useful to allow one
// event handler to unwind before triggering another event
_asyncClick: function() {
this.async(function() {
this.click();
}, 1);
},
// any of these changes are considered a change to button state
_pressedChanged: function(pressed) {
this._changedButtonState();
},
_activeChanged: function(active) {
if (this.toggles) {
this.setAttribute('aria-pressed', active ? 'true' : 'false');
} else {
this.removeAttribute('aria-pressed');
}
this._changedButtonState();
},
_controlStateChanged: function() {
if (this.disabled) {
this._setPressed(false);
} else {
this._changedButtonState();
}
},
// provide hook for follow-on behaviors to react to button-state
_changedButtonState: function() {
if (this._buttonStateChanged) {
this._buttonStateChanged(); // abstract
}
}
};
/** @polymerBehavior Polymer.IronButtonState */
Polymer.IronButtonState = [
Polymer.IronA11yKeysBehavior,
Polymer.IronButtonStateImpl
];
</script>

View file

@ -0,0 +1,108 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<script>
/**
* @demo demo/index.html
* @polymerBehavior
*/
Polymer.IronControlState = {
properties: {
/**
* If true, the element currently has focus.
*/
focused: {
type: Boolean,
value: false,
notify: true,
readOnly: true,
reflectToAttribute: true
},
/**
* If true, the user cannot interact with this element.
*/
disabled: {
type: Boolean,
value: false,
notify: true,
observer: '_disabledChanged',
reflectToAttribute: true
},
_oldTabIndex: {
type: Number
},
_boundFocusBlurHandler: {
type: Function,
value: function() {
return this._focusBlurHandler.bind(this);
}
}
},
observers: [
'_changedControlState(focused, disabled)'
],
ready: function() {
// TODO(sjmiles): ensure read-only property is valued so the compound
// observer will fire
if (this.focused === undefined) {
this._setFocused(false);
}
this.addEventListener('focus', this._boundFocusBlurHandler, true);
this.addEventListener('blur', this._boundFocusBlurHandler, true);
},
_focusBlurHandler: function(event) {
var target = event.path ? event.path[0] : event.target;
if (target === this) {
var focused = event.type === 'focus';
this._setFocused(focused);
} else if (!this.shadowRoot) {
event.stopPropagation();
this.fire(event.type, {sourceEvent: event}, {
node: this,
bubbles: event.bubbles,
cancelable: event.cancelable
});
}
},
_disabledChanged: function(disabled, old) {
this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
this.style.pointerEvents = disabled ? 'none' : '';
if (disabled) {
this._oldTabIndex = this.tabIndex;
this.focused = false;
this.tabIndex = -1;
} else if (this._oldTabIndex !== undefined) {
this.tabIndex = this._oldTabIndex;
}
},
_changedControlState: function() {
// _controlStateChanged is abstract, follow-on behaviors may implement it
if (this._controlStateChanged) {
this._controlStateChanged();
}
}
};
</script>

View file

@ -0,0 +1,307 @@
<!--
@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
-->
<link rel="import" href="iron-shadow-flex-layout.html">
<style>
/*******************************
Flex Layout
*******************************/
.layout.horizontal,
.layout.horizontal-reverse,
.layout.vertical,
.layout.vertical-reverse {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.layout.inline {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
.layout.horizontal {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.layout.horizontal-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.layout.vertical {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.layout.vertical-reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.layout.wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.layout.wrap-reverse {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-auto {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
.flex-none {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
.flex,
.flex-1 {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flex-2 {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
}
.flex-3 {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.flex-4 {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.flex-5 {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
}
.flex-6 {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
}
.flex-7 {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.flex-8 {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
}
.flex-9 {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
}
.flex-10 {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
}
.flex-11 {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
}
.flex-12 {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
}
/* alignment in cross axis */
.layout.start {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.layout.center,
.layout.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.layout.end {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* alignment in main axis */
.layout.start-justified {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.layout.center-justified,
.layout.center-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.layout.end-justified {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.layout.around-justified {
-ms-flex-pack: around;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.layout.justified {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* self alignment */
.self-start {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
.self-center {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
}
.self-end {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
}
.self-stretch {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
}
/*******************************
Other Layout
*******************************/
.block {
display: block;
}
/* IE 10 support for HTML5 hidden attr */
[hidden] {
display: none !important;
}
.invisible {
visibility: hidden !important;
}
.relative {
position: relative;
}
.fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
body.fullbleed {
margin: 0;
height: 100vh;
}
.scroll {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
/* fixed position */
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top {
position: fixed;
}
.fixed-top {
top: 0;
left: 0;
right: 0;
}
.fixed-right {
top: 0;
right: 0;
bottom: 0;
}
.fixed-bottom {
right: 0;
bottom: 0;
left: 0;
}
.fixed-left {
top: 0;
bottom: 0;
left: 0;
}
</style>

View file

@ -0,0 +1,302 @@
<!--
@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
-->
<style>
/*******************************
Flex Layout
*******************************/
html /deep/ .layout.horizontal,
html /deep/ .layout.horizontal-reverse,
html /deep/ .layout.vertical,
html /deep/ .layout.vertical-reverse {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
html /deep/ .layout.inline {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
html /deep/ .layout.horizontal {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
html /deep/ .layout.horizontal-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
html /deep/ .layout.vertical {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
html /deep/ .layout.vertical-reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
html /deep/ .layout.wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
html /deep/ .layout.wrap-reverse {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
html /deep/ .flex-auto {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
html /deep/ .flex-none {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
html /deep/ .flex,
html /deep/ .flex-1 {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
html /deep/ .flex-2 {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
}
html /deep/ .flex-3 {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
}
html /deep/ .flex-4 {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
}
html /deep/ .flex-5 {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
}
html /deep/ .flex-6 {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
}
html /deep/ .flex-7 {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
}
html /deep/ .flex-8 {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
}
html /deep/ .flex-9 {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
}
html /deep/ .flex-10 {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
}
html /deep/ .flex-11 {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
}
html /deep/ .flex-12 {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
}
/* alignment in cross axis */
html /deep/ .layout.start {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
html /deep/ .layout.center,
html /deep/ .layout.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
html /deep/ .layout.end {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* alignment in main axis */
html /deep/ .layout.start-justified {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
html /deep/ .layout.center-justified,
html /deep/ .layout.center-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
html /deep/ .layout.end-justified {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
html /deep/ .layout.around-justified {
-ms-flex-pack: around;
-webkit-justify-content: space-around;
justify-content: space-around;
}
html /deep/ .layout.justified {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* self alignment */
html /deep/ .self-start {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
html /deep/ .self-center {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
}
html /deep/ .self-end {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
}
html /deep/ .self-stretch {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
}
/*******************************
Other Layout
*******************************/
html /deep/ .block {
display: block;
}
/* IE 10 support for HTML5 hidden attr */
html /deep/ [hidden] {
display: none !important;
}
html /deep/ .invisible {
visibility: hidden !important;
}
html /deep/ .relative {
position: relative;
}
html /deep/ .fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
body.fullbleed {
margin: 0;
height: 100vh;
}
html /deep/ .scroll {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top {
position: fixed;
}
html /deep/ .fixed-top {
top: 0;
left: 0;
right: 0;
}
html /deep/ .fixed-right {
top: 0;
right: 0;
botttom: 0;
}
html /deep/ .fixed-bottom {
right: 0;
bottom: 0;
left: 0;
}
html /deep/ .fixed-left {
top: 0;
botttom: 0;
left: 0;
}
</style>

View file

@ -0,0 +1,313 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<style is="custom-style">
:root {
--layout: {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
};
--layout-inline: {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
};
--layout-horizontal: {
/* @apply(--layout); */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
};
--layout-horizontal-reverse: {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
};
--layout-vertical: {
/* @apply(--layout); */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
};
--layout-vertical-reverse: {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
};
--layout-wrap: {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
};
--layout-wrap-reverse: {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
};
--layout-flex-auto: {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
};
--layout-flex-none: {
-ms-flex: none;
-webkit-flex: none;
flex: none;
};
--layout-flex: {
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
};
--layout-flex-2: {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
};
--layout-flex-3: {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
};
--layout-flex-4: {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
};
--layout-flex-5: {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
};
--layout-flex-6: {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
};
--layout-flex-7: {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
};
--layout-flex-8: {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
};
--layout-flex-9: {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
};
--layout-flex-10: {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
};
--layout-flex-11: {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
};
--layout-flex-12: {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
};
/* alignment in cross axis */
--layout-start: {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
};
--layout-center: {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
};
--layout-end: {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
};
/* alignment in main axis */
--layout-start-justified: {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
};
--layout-center-justified: {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
};
--layout-end-justified: {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
};
--layout-around-justified: {
-ms-flex-pack: around;
-webkit-justify-content: space-around;
justify-content: space-around;
};
--layout-justified: {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
};
--layout-center-center: {
/* @apply(--layout-center --layout-center-justified); */
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
};
/* self alignment */
--layout-self-start: {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
};
--layout-self-center: {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
};
--layout-self-end: {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
};
--layout-self-stretch: {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
};
/*******************************
Other Layout
*******************************/
--layout-block: {
display: block;
};
--layout-invisible: {
visibility: hidden !important;
};
--layout-relative: {
position: relative;
};
--layout-fit: {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
};
--layout-scroll: {
-webkit-overflow-scrolling: touch;
overflow: auto;
};
/* fixed position */
--layout-fixed-bottom:,
--layout-fixed-left:,
--layout-fixed-right:,
--layout-fixed-top: {
position: fixed;
};
--layout-fixed-top: {
top: 0;
left: 0;
right: 0;
};
--layout-fixed-right: {
top: 0;
right: 0;
bottom: 0;
};
--layout-fixed-bottom: {
right: 0;
bottom: 0;
left: 0;
};
--layout-fixed-left: {
top: 0;
bottom: 0;
left: 0;
};
}
</style>

View file

@ -0,0 +1,179 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-meta/iron-meta.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<!--
The `iron-icon` element displays an icon. By default an icon renders as a 24px square.
Example using src:
<iron-icon src="star.png"></iron-icon>
Example setting size to 32px x 32px:
<iron-icon class="big" src="big_star.png"></iron-icon>
<style is="custom-style">
.big {
--iron-icon-height: 32px;
--iron-icon-width: 32px;
}
</style>
The iron elements include several sets of icons.
To use the default set of icons, import `iron-icons.html` and use the `icon` attribute to specify an icon:
&lt;!-- import default iconset and iron-icon --&gt;
<link rel="import" href="/components/iron-icons/iron-icons.html">
<iron-icon icon="menu"></iron-icon>
To use a different built-in set of icons, import `iron-icons/<iconset>-icons.html`, and
specify the icon as `<iconset>:<icon>`. For example:
&lt;!-- import communication iconset and iron-icon --&gt;
<link rel="import" href="/components/iron-icons/communication-icons.html">
<iron-icon icon="communication:email"></iron-icon>
You can also create custom icon sets of bitmap or SVG icons.
Example of using an icon named `cherry` from a custom iconset with the ID `fruit`:
<iron-icon icon="fruit:cherry"></iron-icon>
See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about
how to create a custom iconset.
See [iron-icons](https://elements.polymer-project.org/elements/iron-icons?view=demo:demo/index.html) for the default set of icons.
### Styling
The following custom properties are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--iron-icon-width` | Width of the icon | `24px`
`--iron-icon-height` | Height of the icon | `24px`
@group Iron Elements
@element iron-icon
@demo demo/index.html
@hero hero.svg
@homepage polymer.github.io
-->
<dom-module id="iron-icon">
<style>
:host {
@apply(--layout-inline);
@apply(--layout-center-center);
position: relative;
vertical-align: middle;
fill: currentcolor;
width: var(--iron-icon-width, 24px);
height: var(--iron-icon-height, 24px);
}
</style>
<template>
<iron-meta id="meta" type="iconset"></iron-meta>
</template>
<script>
Polymer({
is: 'iron-icon',
properties: {
/**
* The name of the icon to use. The name should be of the form:
* `iconset_name:icon_name`.
*/
icon: {
type: String,
observer: '_iconChanged'
},
/**
* The name of the theme to used, if one is specified by the
* iconset.
*/
theme: {
type: String,
observer: '_updateIcon'
},
/**
* If using iron-icon without an iconset, you can set the src to be
* the URL of an individual icon image file. Note that this will take
* precedence over a given icon attribute.
*/
src: {
type: String,
observer: '_srcChanged'
}
},
_DEFAULT_ICONSET: 'icons',
_iconChanged: function(icon) {
var parts = (icon || '').split(':');
this._iconName = parts.pop();
this._iconsetName = parts.pop() || this._DEFAULT_ICONSET;
this._updateIcon();
},
_srcChanged: function(src) {
this._updateIcon();
},
_usesIconset: function() {
return this.icon || !this.src;
},
_updateIcon: function() {
if (this._usesIconset()) {
if (this._iconsetName) {
this._iconset = this.$.meta.byKey(this._iconsetName);
if (this._iconset) {
this._iconset.applyIcon(this, this._iconName, this.theme);
} else {
this._warn(this._logf('_updateIcon', 'could not find iconset `'
+ this._iconsetName + '`, did you import the iconset?'));
}
}
} else {
if (!this._img) {
this._img = document.createElement('img');
this._img.style.width = '100%';
this._img.style.height = '100%';
}
this._img.src = this.src;
Polymer.dom(this.root).appendChild(this._img);
}
}
});
</script>
</dom-module>

View file

@ -0,0 +1,303 @@
<!--
Copyright (c) 2014 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
-->
<!--
`iron-icons` is a utility import that includes the definition for the `iron-icon` element, `iron-iconset-svg` element, as well as an import for the default icon set.
The `iron-icons` directory also includes imports for additional icon sets that can be loaded into your project.
Example loading icon set:
<link rel="import" href="../iron-icons/maps-icons.html">
To use an icon from one of these sets, first prefix your `iron-icon` with the icon set name, followed by a colon, ":", and then the icon id.
Example using the directions-bus icon from the maps icon set:
<iron-icon icon="maps:directions-bus"></iron-icon>
See [iron-icon](#iron-icon) for more information about working with icons.
See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about how to create a custom iconset.
@group Iron Elements
@element iron-icons
@demo demo/index.html
-->
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
<iron-iconset-svg name="icons" size="24">
<svg><defs>
<g id="3d-rotation"><path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z"/></g>
<g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></g>
<g id="account-balance"><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></g>
<g id="account-balance-wallet"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></g>
<g id="account-box"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/></g>
<g id="account-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></g>
<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
<g id="add-alert"><path d="M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72C7.37 5.03 5.12 7.75 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z"/></g>
<g id="add-box"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></g>
<g id="add-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></g>
<g id="add-circle-outline"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></g>
<g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/></g>
<g id="alarm"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></g>
<g id="alarm-add"><path d="M7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-11h-2v3H8v2h3v3h2v-3h3v-2h-3V9z"/></g>
<g id="alarm-off"><path d="M12 6c3.87 0 7 3.13 7 7 0 .84-.16 1.65-.43 2.4l1.52 1.52c.58-1.19.91-2.51.91-3.92 0-4.97-4.03-9-9-9-1.41 0-2.73.33-3.92.91L9.6 6.43C10.35 6.16 11.16 6 12 6zm10-.28l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM2.92 2.29L1.65 3.57 2.98 4.9l-1.11.93 1.42 1.42 1.11-.94.8.8C3.83 8.69 3 10.75 3 13c0 4.97 4.02 9 9 9 2.25 0 4.31-.83 5.89-2.2l2.2 2.2 1.27-1.27L3.89 3.27l-.97-.98zm13.55 16.1C15.26 19.39 13.7 20 12 20c-3.87 0-7-3.13-7-7 0-1.7.61-3.26 1.61-4.47l9.86 9.86zM8.02 3.28L6.6 1.86l-.86.71 1.42 1.42.86-.71z"/></g>
<g id="alarm-on"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1.46-5.47L8.41 12.4l-1.06 1.06 3.18 3.18 6-6-1.06-1.06-4.93 4.95z"/></g>
<g id="android"><path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/></g>
<g id="announcement"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/></g>
<g id="apps"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></g>
<g id="archive"><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z"/></g>
<g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></g>
<g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"/></g>
<g id="arrow-drop-down-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"/></g>
<g id="arrow-drop-up"><path d="M7 14l5-5 5 5z"/></g>
<g id="arrow-forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></g>
<g id="aspect-ratio"><path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"/></g>
<g id="assessment"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></g>
<g id="assignment"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></g>
<g id="assignment-ind"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"/></g>
<g id="assignment-late"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-6 15h-2v-2h2v2zm0-4h-2V8h2v6zm-1-9c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></g>
<g id="assignment-return"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm4 12h-4v3l-5-5 5-5v3h4v4z"/></g>
<g id="assignment-returned"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 15l-5-5h3V9h4v4h3l-5 5z"/></g>
<g id="assignment-turned-in"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></g>
<g id="attachment"><path d="M7.5 18C4.46 18 2 15.54 2 12.5S4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v1.5H9.5c-.55 0-1 .45-1 1s.45 1 1 1H18c1.38 0 2.5-1.12 2.5-2.5S19.38 8.5 18 8.5H7.5c-2.21 0-4 1.79-4 4s1.79 4 4 4H17V18H7.5z"/></g>
<g id="autorenew"><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/></g>
<g id="backspace"><path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z"/></g>
<g id="backup"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></g>
<g id="block"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></g>
<g id="book"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/></g>
<g id="bookmark"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></g>
<g id="bookmark-border"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"/></g>
<g id="bug-report"><path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/></g>
<g id="build"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></g>
<g id="cached"><path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"/></g>
<g id="camera-enhance"><path d="M9 3L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3.17L15 3H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zM12 17l1.25-2.75L16 13l-2.75-1.25L12 9l-1.25 2.75L8 13l2.75 1.25z"/></g>
<g id="cancel"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></g>
<g id="card-giftcard"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/></g>
<g id="card-membership"><path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"/></g>
<g id="card-travel"><path d="M20 6h-3V4c0-1.11-.89-2-2-2H9c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM9 4h6v2H9V4zm11 15H4v-2h16v2zm0-5H4V8h3v2h2V8h6v2h2V8h3v6z"/></g>
<g id="change-history"><path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"/></g>
<g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></g>
<g id="check-box"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></g>
<g id="check-box-outline-blank"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></g>
<g id="check-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></g>
<g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></g>
<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></g>
<g id="chrome-reader-mode"><path d="M13 12h7v1.5h-7zm0-2.5h7V11h-7zm0 5h7V16h-7zM21 4H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15h-9V6h9v13z"/></g>
<g id="class"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/></g>
<g id="clear"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></g>
<g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></g>
<g id="cloud"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/></g>
<g id="cloud-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.5 14H8c-1.66 0-3-1.34-3-3s1.34-3 3-3l.14.01C8.58 8.28 10.13 7 12 7c2.21 0 4 1.79 4 4h.5c1.38 0 2.5 1.12 2.5 2.5S17.88 16 16.5 16z"/></g>
<g id="cloud-done"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/></g>
<g id="cloud-download"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"/></g>
<g id="cloud-off"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z"/></g>
<g id="cloud-queue"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3z"/></g>
<g id="cloud-upload"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></g>
<g id="code"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></g>
<g id="content-copy"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></g>
<g id="content-cut"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"/></g>
<g id="content-paste"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></g>
<g id="create"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></g>
<g id="credit-card"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></g>
<g id="dashboard"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></g>
<g id="delete"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></g>
<g id="description"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></g>
<g id="dns"><path d="M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 19c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></g>
<g id="done"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></g>
<g id="done-all"><path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/></g>
<g id="drafts"><path d="M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z"/></g>
<g id="eject"><path d="M5 17h14v2H5zm7-12L5.33 15h13.34z"/></g>
<g id="error"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></g>
<g id="error-outline"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></g>
<g id="event"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/></g>
<g id="event-seat"><defs><path id="a" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path d="M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v3h-3zM2 10h3v3H2zm15 3H7V5c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2v8z" clip-path="url(#b)"/></g>
<g id="exit-to-app"><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></g>
<g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></g>
<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></g>
<g id="explore"><path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z"/></g>
<g id="extension"><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></g>
<g id="face"><path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/></g>
<g id="favorite"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></g>
<g id="favorite-border"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></g>
<g id="feedback"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"/></g>
<g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></g>
<g id="file-upload"><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></g>
<g id="filter-list"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></g>
<g id="find-in-page"><path d="M20 19.59V8l-6-6H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c.45 0 .85-.15 1.19-.4l-4.43-4.43c-.8.52-1.74.83-2.76.83-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z"/></g>
<g id="find-replace"><path d="M11 6c1.38 0 2.63.56 3.54 1.46L12 10h6V4l-2.05 2.05C14.68 4.78 12.93 4 11 4c-3.53 0-6.43 2.61-6.92 6H6.1c.46-2.28 2.48-4 4.9-4zm5.64 9.14c.66-.9 1.12-1.97 1.28-3.14H15.9c-.46 2.28-2.48 4-4.9 4-1.38 0-2.63-.56-3.54-1.46L10 12H4v6l2.05-2.05C7.32 17.22 9.07 18 11 18c1.55 0 2.98-.51 4.14-1.36L20 21.49 21.49 20l-4.85-4.86z"/></g>
<g id="flag"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/></g>
<g id="flight-land"><defs><path id="a" d="M0 0h24v24H0V0z"/></defs><defs><path id="c" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><clipPath id="d" clip-path="url(#b)"><use xlink:href="#c" overflow="visible"/></clipPath><path d="M2.5 19h19v2h-19zm7.18-5.73l4.35 1.16 5.31 1.42c.8.21 1.62-.26 1.84-1.06.21-.8-.26-1.62-1.06-1.84l-5.31-1.42-2.76-9.02L10.12 2v8.28L5.15 8.95l-.93-2.32-1.45-.39v5.17l1.6.43 5.31 1.43z" clip-path="url(#d)"/></g>
<g id="flight-takeoff"><defs><path id="a" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path d="M2.5 19h19v2h-19zm19.57-9.36c-.21-.8-1.04-1.28-1.84-1.06L14.92 10l-6.9-6.43-1.93.51 4.14 7.17-4.97 1.33-1.97-1.54-1.45.39 1.82 3.16.77 1.33 1.6-.43 5.31-1.42 4.35-1.16L21 11.49c.81-.23 1.28-1.05 1.07-1.85z" clip-path="url(#b)"/></g>
<g id="flip-to-back"><path d="M9 7H7v2h2V7zm0 4H7v2h2v-2zm0-8c-1.11 0-2 .9-2 2h2V3zm4 12h-2v2h2v-2zm6-12v2h2c0-1.1-.9-2-2-2zm-6 0h-2v2h2V3zM9 17v-2H7c0 1.1.89 2 2 2zm10-4h2v-2h-2v2zm0-4h2V7h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zM5 7H3v12c0 1.1.89 2 2 2h12v-2H5V7zm10-2h2V3h-2v2zm0 12h2v-2h-2v2z"/></g>
<g id="flip-to-front"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/></g>
<g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></g>
<g id="folder-open"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/></g>
<g id="folder-shared"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-5 3c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm4 8h-8v-1c0-1.33 2.67-2 4-2s4 .67 4 2v1z"/></g>
<g id="font-download"><path d="M9.93 13.5h4.14L12 7.98zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z"/></g>
<g id="forward"><path d="M12 8V4l8 8-8 8v-4H4V8z"/></g>
<g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></g>
<g id="fullscreen-exit"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></g>
<g id="gesture"><path d="M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1H21v-2.5h-2.47c-.15-1.65-1.09-4.2-4.03-4.2-2.25 0-4.18 1.91-4.94 2.84-.58.73-2.06 2.48-2.29 2.72-.25.3-.68.84-1.11.84-.45 0-.72-.83-.36-1.92.35-1.09 1.4-2.86 1.85-3.52.78-1.14 1.3-1.92 1.3-3.28C8.95 3.69 7.31 3 6.44 3 5.12 3 3.97 4 3.72 4.25c-.36.36-.66.66-.88.93l1.75 1.71zm9.29 11.66c-.31 0-.74-.26-.74-.72 0-.6.73-2.2 2.87-2.76-.3 2.69-1.43 3.48-2.13 3.48z"/></g>
<g id="get-app"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></g>
<g id="gif"><defs><path id="a" d="M24 24H0V0h24v24z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path d="M11.5 9H13v6h-1.5zM9 9H6c-.6 0-1 .5-1 1v4c0 .5.4 1 1 1h3c.6 0 1-.5 1-1v-2H8.5v1.5h-2v-3H10V10c0-.5-.4-1-1-1zm10 1.5V9h-4.5v6H16v-2h2v-1.5h-2v-1z" clip-path="url(#b)"/></g>
<g id="grade"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></g>
<g id="group-work"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM8 17.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM9.5 8c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8zm6.5 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></g>
<g id="help"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></g>
<g id="help-outline"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></g>
<g id="highlight-off"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></g>
<g id="history"><path opacity=".9" d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></g>
<g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></g>
<g id="hourglass-empty"><path d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z"/></g>
<g id="hourglass-full"><path d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6z"/></g>
<g id="http"><path d="M4.5 11h-2V9H1v6h1.5v-2.5h2V15H6V9H4.5v2zm2.5-.5h1.5V15H10v-4.5h1.5V9H7v1.5zm5.5 0H14V15h1.5v-4.5H17V9h-4.5v1.5zm9-1.5H18v6h1.5v-2h2c.8 0 1.5-.7 1.5-1.5v-1c0-.8-.7-1.5-1.5-1.5zm0 2.5h-2v-1h2v1z"/></g>
<g id="https"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></g>
<g id="inbox"><path d="M19 3H4.99c-1.1 0-1.98.9-1.98 2L3 19c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.34 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z"/></g>
<g id="indeterminate-check-box"><defs><path id="a" d="M0 0h24v24H0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"/></g>
<g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></g>
<g id="info-outline"><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/></g>
<g id="input"><path d="M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3z"/></g>
<g id="invert-colors"><path d="M17.66 7.93L12 2.27 6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58c2.05 0 4.1-.78 5.66-2.34 3.12-3.12 3.12-8.19 0-11.31zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></g>
<g id="label"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></g>
<g id="label-outline"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16zM16 17H5V7h11l3.55 5L16 17z"/></g>
<g id="language"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></g>
<g id="launch"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></g>
<g id="link"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></g>
<g id="list"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></g>
<g id="lock"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></g>
<g id="lock-open"><path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/></g>
<g id="lock-outline"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6-5.1c1.71 0 3.1 1.39 3.1 3.1v2H9V6h-.1c0-1.71 1.39-3.1 3.1-3.1zM18 20H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></g>
<g id="loyalty"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7zm11.77 8.27L13 19.54l-4.27-4.27C8.28 14.81 8 14.19 8 13.5c0-1.38 1.12-2.5 2.5-2.5.69 0 1.32.28 1.77.74l.73.72.73-.73c.45-.45 1.08-.73 1.77-.73 1.38 0 2.5 1.12 2.5 2.5 0 .69-.28 1.32-.73 1.77z"/></g>
<g id="mail"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></g>
<g id="markunread"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></g>
<g id="markunread-mailbox"><path d="M20 6H10v6H8V4h6V0H6v6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"/></g>
<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g>
<g id="more-horiz"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></g>
<g id="more-vert"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></g>
<g id="note-add"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/></g>
<g id="offline-pin"><defs><path id="a" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 16H7v-2h10v2zm-6.7-4L7 10.7l1.4-1.4 1.9 1.9 5.3-5.3L17 7.3 10.3 14z"/></g>
<g id="open-in-browser"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/></g>
<g id="open-in-new"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></g>
<g id="open-with"><path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/></g>
<g id="pageview"><path d="M11.5 9C10.12 9 9 10.12 9 11.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5S12.88 9 11.5 9zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-3.21 14.21l-2.91-2.91c-.69.44-1.51.7-2.39.7C9.01 16 7 13.99 7 11.5S9.01 7 11.5 7 16 9.01 16 11.5c0 .88-.26 1.69-.7 2.39l2.91 2.9-1.42 1.42z"/></g>
<g id="payment"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></g>
<g id="perm-camera-mic"><path d="M20 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v-2.09c-2.83-.48-5-2.94-5-5.91h2c0 2.21 1.79 4 4 4s4-1.79 4-4h2c0 2.97-2.17 5.43-5 5.91V21h7c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-6 8c0 1.1-.9 2-2 2s-2-.9-2-2V9c0-1.1.9-2 2-2s2 .9 2 2v4z"/></g>
<g id="perm-contact-calendar"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1z"/></g>
<g id="perm-data-setting"><path d="M18.99 11.5c.34 0 .67.03 1 .07L20 0 0 20h11.56c-.04-.33-.07-.66-.07-1 0-4.14 3.36-7.5 7.5-7.5zm3.71 7.99c.02-.16.04-.32.04-.49 0-.17-.01-.33-.04-.49l1.06-.83c.09-.08.12-.21.06-.32l-1-1.73c-.06-.11-.19-.15-.31-.11l-1.24.5c-.26-.2-.54-.37-.85-.49l-.19-1.32c-.01-.12-.12-.21-.24-.21h-2c-.12 0-.23.09-.25.21l-.19 1.32c-.3.13-.59.29-.85.49l-1.24-.5c-.11-.04-.24 0-.31.11l-1 1.73c-.06.11-.04.24.06.32l1.06.83c-.02.16-.03.32-.03.49 0 .17.01.33.03.49l-1.06.83c-.09.08-.12.21-.06.32l1 1.73c.06.11.19.15.31.11l1.24-.5c.26.2.54.37.85.49l.19 1.32c.02.12.12.21.25.21h2c.12 0 .23-.09.25-.21l.19-1.32c.3-.13.59-.29.84-.49l1.25.5c.11.04.24 0 .31-.11l1-1.73c.06-.11.03-.24-.06-.32l-1.07-.83zm-3.71 1.01c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></g>
<g id="perm-device-information"><path d="M13 7h-2v2h2V7zm0 4h-2v6h2v-6zm4-9.99L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></g>
<g id="perm-identity"><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"/></g>
<g id="perm-media"><path d="M2 6H0v5h.01L0 20c0 1.1.9 2 2 2h18v-2H2V6zm20-2h-8l-2-2H6c-1.1 0-1.99.9-1.99 2L4 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 15l4.5-6 3.5 4.51 2.5-3.01L21 15H7z"/></g>
<g id="perm-phone-msg"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.58l2.2-2.21c.28-.27.36-.66.25-1.01C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM12 3v10l3-3h6V3h-9z"/></g>
<g id="perm-scan-wifi"><path d="M12 3C6.95 3 3.15 4.85 0 7.23L12 22 24 7.25C20.85 4.87 17.05 3 12 3zm1 13h-2v-6h2v6zm-2-8V6h2v2h-2z"/></g>
<g id="picture-in-picture"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/></g>
<g id="play-for-work"><path fill="#010101" d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z"/></g>
<g id="polymer"><path d="M19 4h-4L7.11 16.63 4.5 12 9 4H5L.5 12 5 20h4l7.89-12.63L19.5 12 15 20h4l4.5-8z"/></g>
<g id="power-settings-new"><path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/></g>
<g id="print"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></g>
<g id="query-builder"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zM12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></g>
<g id="question-answer"><path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/></g>
<g id="radio-button-checked"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></g>
<g id="radio-button-unchecked"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></g>
<g id="receipt"><path d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"/></g>
<g id="redeem"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/></g>
<g id="redo"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></g>
<g id="refresh"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></g>
<g id="remove"><path d="M19 13H5v-2h14v2z"/></g>
<g id="remove-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/></g>
<g id="remove-circle-outline"><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></g>
<g id="reorder"><path d="M3 15h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V9H3v2zm0-6v2h18V5H3z"/></g>
<g id="reply"><path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/></g>
<g id="reply-all"><path d="M7 8V5l-7 7 7 7v-3l-4-4 4-4zm6 1V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/></g>
<g id="report"><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"/></g>
<g id="report-problem"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></g>
<g id="restore"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></g>
<g id="room"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></g>
<g id="save"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></g>
<g id="schedule"><path fill-opacity=".9" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zM12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></g>
<g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></g>
<g id="select-all"><path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2zM7 17h10V7H7v10zm2-8h6v6H9V9z"/></g>
<g id="send"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></g>
<g id="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></g>
<g id="settings-applications"><path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z"/></g>
<g id="settings-backup-restore"><path d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z"/></g>
<g id="settings-bluetooth"><path d="M11 24h2v-2h-2v2zm-4 0h2v-2H7v2zm8 0h2v-2h-2v2zm2.71-18.29L12 0h-1v7.59L6.41 3 5 4.41 10.59 10 5 15.59 6.41 17 11 12.41V20h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 3.83l1.88 1.88L13 7.59V3.83zm1.88 10.46L13 16.17v-3.76l1.88 1.88z"/></g>
<g id="settings-brightness"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02zM8 16h2.5l1.5 1.5 1.5-1.5H16v-2.5l1.5-1.5-1.5-1.5V8h-2.5L12 6.5 10.5 8H8v2.5L6.5 12 8 13.5V16zm4-7c1.66 0 3 1.34 3 3s-1.34 3-3 3V9z"/></g>
<g id="settings-cell"><path d="M7 24h2v-2H7v2zm4 0h2v-2h-2v2zm4 0h2v-2h-2v2zM16 .01L8 0C6.9 0 6 .9 6 2v16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V2c0-1.1-.9-1.99-2-1.99zM16 16H8V4h8v12z"/></g>
<g id="settings-ethernet"><path d="M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z"/></g>
<g id="settings-input-antenna"><path d="M12 5c-3.87 0-7 3.13-7 7h2c0-2.76 2.24-5 5-5s5 2.24 5 5h2c0-3.87-3.13-7-7-7zm1 9.29c.88-.39 1.5-1.26 1.5-2.29 0-1.38-1.12-2.5-2.5-2.5S9.5 10.62 9.5 12c0 1.02.62 1.9 1.5 2.29v3.3L7.59 21 9 22.41l3-3 3 3L16.41 21 13 17.59v-3.3zM12 1C5.93 1 1 5.93 1 12h2c0-4.97 4.03-9 9-9s9 4.03 9 9h2c0-6.07-4.93-11-11-11z"/></g>
<g id="settings-input-component"><path d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"/></g>
<g id="settings-input-composite"><path d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"/></g>
<g id="settings-input-hdmi"><path d="M18 7V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v3H5v6l3 6v3h8v-3l3-6V7h-1zM8 4h8v3h-2V5h-1v2h-2V5h-1v2H8V4z"/></g>
<g id="settings-input-svideo"><path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/></g>
<g id="settings-overscan"><path d="M12.01 5.5L10 8h4l-1.99-2.5zM18 10v4l2.5-1.99L18 10zM6 10l-2.5 2.01L6 14v-4zm8 6h-4l2.01 2.5L14 16zm7-13H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"/></g>
<g id="settings-phone"><path d="M13 9h-2v2h2V9zm4 0h-2v2h2V9zm3 6.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.58l2.2-2.21c.28-.27.36-.66.25-1.01C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 9v2h2V9h-2z"/></g>
<g id="settings-power"><path d="M7 24h2v-2H7v2zm4 0h2v-2h-2v2zm2-22h-2v10h2V2zm3.56 2.44l-1.45 1.45C16.84 6.94 18 8.83 18 11c0 3.31-2.69 6-6 6s-6-2.69-6-6c0-2.17 1.16-4.06 2.88-5.12L7.44 4.44C5.36 5.88 4 8.28 4 11c0 4.42 3.58 8 8 8s8-3.58 8-8c0-2.72-1.36-5.12-3.44-6.56zM15 24h2v-2h-2v2z"/></g>
<g id="settings-remote"><path d="M15 9H9c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V10c0-.55-.45-1-1-1zm-3 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM7.05 6.05l1.41 1.41C9.37 6.56 10.62 6 12 6s2.63.56 3.54 1.46l1.41-1.41C15.68 4.78 13.93 4 12 4s-3.68.78-4.95 2.05zM12 0C8.96 0 6.21 1.23 4.22 3.22l1.41 1.41C7.26 3.01 9.51 2 12 2s4.74 1.01 6.36 2.64l1.41-1.41C17.79 1.23 15.04 0 12 0z"/></g>
<g id="settings-voice"><path d="M7 24h2v-2H7v2zm5-11c1.66 0 2.99-1.34 2.99-3L15 4c0-1.66-1.34-3-3-3S9 2.34 9 4v6c0 1.66 1.34 3 3 3zm-1 11h2v-2h-2v2zm4 0h2v-2h-2v2zm4-14h-1.7c0 3-2.54 5.1-5.3 5.1S6.7 13 6.7 10H5c0 3.41 2.72 6.23 6 6.72V20h2v-3.28c3.28-.49 6-3.31 6-6.72z"/></g>
<g id="shop"><path d="M16 6V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H2v13c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6h-6zm-6-2h4v2h-4V4zM9 18V9l7.5 4L9 18z"/></g>
<g id="shop-two"><path d="M3 9H1v11c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2H3V9zm15-4V3c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H5v11c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V5h-5zm-6-2h4v2h-4V3zm0 12V8l5.5 3-5.5 4z"/></g>
<g id="shopping-basket"><path d="M17.21 9l-4.38-6.56c-.19-.28-.51-.42-.83-.42-.32 0-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1h-4.79zM9 9l3-4.4L15 9H9zm3 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></g>
<g id="shopping-cart"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></g>
<g id="sort"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/></g>
<g id="speaker-notes"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 14H6v-2h2v2zm0-3H6V9h2v2zm0-3H6V6h2v2zm7 6h-5v-2h5v2zm3-3h-8V9h8v2zm0-3h-8V6h8v2z"/></g>
<g id="spellcheck"><path d="M12.45 16h2.09L9.43 3H7.57L2.46 16h2.09l1.12-3h5.64l1.14 3zm-6.02-5L8.5 5.48 10.57 11H6.43zm15.16.59l-8.09 8.09L9.83 16l-1.41 1.41 5.09 5.09L23 13l-1.41-1.41z"/></g>
<g id="star"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></g>
<g id="star-border"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></g>
<g id="star-half"><path d="M22 9.74l-7.19-.62L12 2.5 9.19 9.13 2 9.74l5.46 4.73-1.64 7.03L12 17.77l6.18 3.73-1.63-7.03L22 9.74zM12 15.9V6.6l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.9z"/></g>
<g id="stars"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/></g>
<g id="store"><path d="M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z"/></g>
<g id="subject"><path d="M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z"/></g>
<g id="supervisor-account"><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/></g>
<g id="swap-horiz"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></g>
<g id="swap-vert"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z"/></g>
<g id="swap-vertical-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM6.5 9L10 5.5 13.5 9H11v4H9V9H6.5zm11 6L14 18.5 10.5 15H13v-4h2v4h2.5z"/></g>
<g id="system-update-alt"><path d="M12 16.5l4-4h-3v-9h-2v9H8l4 4zm9-13h-6v1.99h6v14.03H3V5.49h6V3.5H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2z"/></g>
<g id="tab"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"/></g>
<g id="tab-unselected"><path d="M1 9h2V7H1v2zm0 4h2v-2H1v2zm0-8h2V3c-1.1 0-2 .9-2 2zm8 16h2v-2H9v2zm-8-4h2v-2H1v2zm2 4v-2H1c0 1.1.9 2 2 2zM21 3h-8v6h10V5c0-1.1-.9-2-2-2zm0 14h2v-2h-2v2zM9 5h2V3H9v2zM5 21h2v-2H5v2zM5 5h2V3H5v2zm16 16c1.1 0 2-.9 2-2h-2v2zm0-8h2v-2h-2v2zm-8 8h2v-2h-2v2zm4 0h2v-2h-2v2z"/></g>
<g id="text-format"><path d="M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98L13.87 11h-3.74L12 5.98z"/></g>
<g id="theaters"><path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"/></g>
<g id="thumb-down"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></g>
<g id="thumb-up"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></g>
<g id="thumbs-up-down"><path d="M12 6c0-.55-.45-1-1-1H5.82l.66-3.18.02-.23c0-.31-.13-.59-.33-.8L5.38 0 .44 4.94C.17 5.21 0 5.59 0 6v6.5c0 .83.67 1.5 1.5 1.5h6.75c.62 0 1.15-.38 1.38-.91l2.26-5.29c.07-.17.11-.36.11-.55V6zm10.5 4h-6.75c-.62 0-1.15.38-1.38.91l-2.26 5.29c-.07.17-.11.36-.11.55V18c0 .55.45 1 1 1h5.18l-.66 3.18-.02.24c0 .31.13.59.33.8l.79.78 4.94-4.94c.27-.27.44-.65.44-1.06v-6.5c0-.83-.67-1.5-1.5-1.5z"/></g>
<g id="toc"><path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"/></g>
<g id="today"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></g>
<g id="toll"><path d="M15 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zM3 12c0-2.61 1.67-4.83 4-5.65V4.26C3.55 5.15 1 8.27 1 12s2.55 6.85 6 7.74v-2.09c-2.33-.82-4-3.04-4-5.65z"/></g>
<g id="track-changes"><path fill="#231F20" d="M19.07 4.93l-1.41 1.41C19.1 7.79 20 9.79 20 12c0 4.42-3.58 8-8 8s-8-3.58-8-8c0-4.08 3.05-7.44 7-7.93v2.02C8.16 6.57 6 9.03 6 12c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.66-.67-3.16-1.76-4.24l-1.41 1.41C15.55 9.9 16 10.9 16 12c0 2.21-1.79 4-4 4s-4-1.79-4-4c0-1.86 1.28-3.41 3-3.86v2.14c-.6.35-1 .98-1 1.72 0 1.1.9 2 2 2s2-.9 2-2c0-.74-.4-1.38-1-1.72V2h-1C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10c0-2.76-1.12-5.26-2.93-7.07z"/></g>
<g id="translate"><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></g>
<g id="trending-down"><path d="M16 18l2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6z"/></g>
<g id="trending-flat"><path d="M22 12l-4-4v3H3v2h15v3z"/></g>
<g id="trending-up"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/></g>
<g id="turned-in"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></g>
<g id="turned-in-not"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"/></g>
<g id="undo"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></g>
<g id="unfold-less"><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"/></g>
<g id="unfold-more"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></g>
<g id="verified-user"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></g>
<g id="view-agenda"><path d="M20 13H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zm0-10H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1z"/></g>
<g id="view-array"><path d="M4 18h3V5H4v13zM18 5v13h3V5h-3zM8 18h9V5H8v13z"/></g>
<g id="view-carousel"><path d="M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z"/></g>
<g id="view-column"><path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"/></g>
<g id="view-day"><path d="M2 21h19v-3H2v3zM20 8H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zM2 3v3h19V3H2z"/></g>
<g id="view-headline"><path d="M4 15h16v-2H4v2zm0 4h16v-2H4v2zm0-8h16V9H4v2zm0-6v2h16V5H4z"/></g>
<g id="view-list"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/></g>
<g id="view-module"><path d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"/></g>
<g id="view-quilt"><path d="M10 18h5v-6h-5v6zm-6 0h5V5H4v13zm12 0h5v-6h-5v6zM10 5v6h11V5H10z"/></g>
<g id="view-stream"><path d="M4 18h17v-6H4v6zM4 5v6h17V5H4z"/></g>
<g id="view-week"><path d="M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1z"/></g>
<g id="visibility"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></g>
<g id="visibility-off"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></g>
<g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></g>
<g id="work"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></g>
<g id="youtube-searched-for"><path d="M17.01 14h-.8l-.27-.27c.98-1.14 1.57-2.61 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 3-6.5 6.5H2l3.84 4 4.16-4H6.51C6.51 7 8.53 5 11.01 5s4.5 2.01 4.5 4.5c0 2.48-2.02 4.5-4.5 4.5-.65 0-1.26-.14-1.82-.38L7.71 15.1c.97.57 2.09.9 3.3.9 1.61 0 3.08-.59 4.22-1.57l.27.27v.79l5.01 4.99L22 19l-4.99-5z"/></g>
<g id="zoom-in"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></g>
<g id="zoom-out"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/></g>
</defs></svg>
</iron-iconset-svg>

View file

@ -0,0 +1,192 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-meta/iron-meta.html">
<script>
/**
* The `iron-iconset-svg` element allows users to define their own icon sets
* that contain svg icons. The svg icon elements should be children of the
* `iron-iconset-svg` element. Multiple icons should be given distinct id's.
*
* Using svg elements to create icons has a few advantages over traditional
* bitmap graphics like jpg or png. Icons that use svg are vector based so they
* are resolution independent and should look good on any device. They are
* stylable via css. Icons can be themed, colorized, and even animated.
*
* Example:
*
* <iron-iconset-svg id="my-svg-icons" iconSize="24">
* <svg>
* <defs>
* <g id="shape">
* <rect x="50" y="50" width="50" height="50" />
* <circle cx="50" cy="50" r="50" />
* </g>
* </defs>
* </svg>
* </iron-iconset-svg>
*
* This will automatically register the icon set "my-svg-icons" to the iconset
* database. To use these icons from within another element, make a
* `iron-iconset` element and call the `byId` method
* to retrieve a given iconset. To apply a particular icon inside an
* element use the `applyIcon` method. For example:
*
* iconset.applyIcon(iconNode, 'car');
*
* @element iron-iconset-svg
* @demo demo/index.html
*/
Polymer({
is: 'iron-iconset-svg',
properties: {
/**
* The name of the iconset.
*
* @attribute name
* @type string
*/
name: {
type: String,
observer: '_nameChanged'
},
/**
* The size of an individual icon. Note that icons must be square.
*
* @attribute iconSize
* @type number
* @default 24
*/
size: {
type: Number,
value: 24
}
},
/**
* Construct an array of all icon names in this iconset.
*
* @return {!Array} Array of icon names.
*/
getIconNames: function() {
this._icons = this._createIconMap();
return Object.keys(this._icons).map(function(n) {
return this.name + ':' + n;
}, this);
},
/**
* Applies an icon to the given element.
*
* An svg icon is prepended to the element's shadowRoot if it exists,
* otherwise to the element itself.
*
* @method applyIcon
* @param {Element} element Element to which the icon is applied.
* @param {string} iconName Name of the icon to apply.
* @return {Element} The svg element which renders the icon.
*/
applyIcon: function(element, iconName) {
// insert svg element into shadow root, if it exists
element = element.root || element;
// Remove old svg element
this.removeIcon(element);
// install new svg element
var svg = this._cloneIcon(iconName);
if (svg) {
var pde = Polymer.dom(element);
pde.insertBefore(svg, pde.childNodes[0]);
return element._svgIcon = svg;
}
return null;
},
/**
* Remove an icon from the given element by undoing the changes effected
* by `applyIcon`.
*
* @param {Element} element The element from which the icon is removed.
*/
removeIcon: function(element) {
// Remove old svg element
if (element._svgIcon) {
Polymer.dom(element).removeChild(element._svgIcon);
element._svgIcon = null;
}
},
/**
*
* When name is changed, register iconset metadata
*
*/
_nameChanged: function() {
new Polymer.IronMeta({type: 'iconset', key: this.name, value: this});
},
/**
* Create a map of child SVG elements by id.
*
* @return {!Object} Map of id's to SVG elements.
*/
_createIconMap: function() {
// Objects chained to Object.prototype (`{}`) have members. Specifically,
// on FF there is a `watch` method that confuses the icon map, so we
// need to use a null-based object here.
var icons = Object.create(null);
Polymer.dom(this).querySelectorAll('[id]')
.forEach(function(icon) {
icons[icon.id] = icon;
});
return icons;
},
/**
* Produce installable clone of the SVG element matching `id` in this
* iconset, or `undefined` if there is no matching element.
*
* @return {Element} Returns an installable clone of the SVG element
* matching `id`.
*/
_cloneIcon: function(id) {
// create the icon map on-demand, since the iconset itself has no discrete
// signal to know when it's children are fully parsed
this._icons = this._icons || this._createIconMap();
return this._prepareSvgClone(this._icons[id], this.size);
},
/**
* @param {Element} sourceSvg
* @param {number} size
* @return {Element}
*/
_prepareSvgClone: function(sourceSvg, size) {
if (sourceSvg) {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', ['0', '0', size, size].join(' '));
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
// TODO(dfreedm): `pointer-events: none` works around https://crbug.com/370136
// TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root
svg.style.cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;';
svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id');
return svg;
}
return null;
}
});
</script>

View file

@ -0,0 +1,352 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<!--
`iron-meta` is a generic element you can use for sharing information across the DOM tree.
It uses [monostate pattern](http://c2.com/cgi/wiki?MonostatePattern) such that any
instance of iron-meta has access to the shared
information. You can use `iron-meta` to share whatever you want (or create an extension
[like x-meta] for enhancements).
The `iron-meta` instances containing your actual data can be loaded in an import,
or constructed in any way you see fit. The only requirement is that you create them
before you try to access them.
Examples:
If I create an instance like this:
<iron-meta key="info" keyUrl="foo/bar"></iron-meta>
Note that keyUrl="foo/bar" is the metadata I've defined. I could define more
attributes or use child nodes to define additional metadata.
Now I can access that element (and it's metadata) from any iron-meta instance
via the byKey method, e.g.
meta.byKey('info').getAttribute('keyUrl').
Pure imperative form would be like:
document.createElement('iron-meta').byKey('info').getAttribute('keyUrl');
Or, in a Polymer element, you can include a meta in your template:
<iron-meta id="meta"></iron-meta>
...
this.$.meta.byKey('info').getAttribute('keyUrl');
@group Iron Elements
@demo demo/index.html
@hero hero.svg
@element iron-meta
-->
<script>
(function() {
// monostate data
var metaDatas = {};
var metaArrays = {};
Polymer.IronMeta = Polymer({
is: 'iron-meta',
properties: {
/**
* The type of meta-data. All meta-data of the same type is stored
* together.
*
* @attribute type
* @type String
* @default 'default'
*/
type: {
type: String,
value: 'default',
observer: '_typeChanged'
},
/**
* The key used to store `value` under the `type` namespace.
*
* @attribute key
* @type String
* @default ''
*/
key: {
type: String,
observer: '_keyChanged'
},
/**
* The meta-data to store or retrieve.
*
* @attribute value
* @type *
* @default this
*/
value: {
type: Object,
notify: true,
observer: '_valueChanged'
},
/**
* If true, `value` is set to the iron-meta instance itself.
*
* @attribute self
* @type Boolean
* @default false
*/
self: {
type: Boolean,
observer: '_selfChanged'
},
/**
* Array of all meta-data values for the given type.
*
* @property list
* @type Array
*/
list: {
type: Array,
notify: true
}
},
/**
* Only runs if someone invokes the factory/constructor directly
* e.g. `new Polymer.IronMeta()`
*/
factoryImpl: function(config) {
if (config) {
for (var n in config) {
switch(n) {
case 'type':
case 'key':
case 'value':
this[n] = config[n];
break;
}
}
}
},
created: function() {
// TODO(sjmiles): good for debugging?
this._metaDatas = metaDatas;
this._metaArrays = metaArrays;
},
_keyChanged: function(key, old) {
this._resetRegistration(old);
},
_valueChanged: function(value) {
this._resetRegistration(this.key);
},
_selfChanged: function(self) {
if (self) {
this.value = this;
}
},
_typeChanged: function(type) {
this._unregisterKey(this.key);
if (!metaDatas[type]) {
metaDatas[type] = {};
}
this._metaData = metaDatas[type];
if (!metaArrays[type]) {
metaArrays[type] = [];
}
this.list = metaArrays[type];
this._registerKeyValue(this.key, this.value);
},
/**
* Retrieves meta data value by key.
*
* @method byKey
* @param {String} key The key of the meta-data to be returned.
* @returns *
*/
byKey: function(key) {
return this._metaData && this._metaData[key];
},
_resetRegistration: function(oldKey) {
this._unregisterKey(oldKey);
this._registerKeyValue(this.key, this.value);
},
_unregisterKey: function(key) {
this._unregister(key, this._metaData, this.list);
},
_registerKeyValue: function(key, value) {
this._register(key, value, this._metaData, this.list);
},
_register: function(key, value, data, list) {
if (key && data && value !== undefined) {
data[key] = value;
list.push(value);
}
},
_unregister: function(key, data, list) {
if (key && data) {
if (key in data) {
var value = data[key];
delete data[key];
this.arrayDelete(list, value);
}
}
}
});
/**
`iron-meta-query` can be used to access infomation stored in `iron-meta`.
Examples:
If I create an instance like this:
<iron-meta key="info" value="foo/bar"></iron-meta>
Note that keyUrl="foo/bar" is the metadata I've defined. I could define more
attributes or use child nodes to define additional metadata.
Now I can access that element (and it's metadata) from any `iron-meta-query` instance:
var value = new Polymer.IronMetaQuery({key: 'info'}).value;
@group Polymer Iron Elements
@element iron-meta-query
*/
Polymer.IronMetaQuery = Polymer({
is: 'iron-meta-query',
properties: {
/**
* The type of meta-data. All meta-data of the same type is stored
* together.
*
* @attribute type
* @type String
* @default 'default'
*/
type: {
type: String,
value: 'default',
observer: '_typeChanged'
},
/**
* Specifies a key to use for retrieving `value` from the `type`
* namespace.
*
* @attribute key
* @type String
*/
key: {
type: String,
observer: '_keyChanged'
},
/**
* The meta-data to store or retrieve.
*
* @attribute value
* @type *
* @default this
*/
value: {
type: Object,
notify: true,
readOnly: true
},
/**
* Array of all meta-data values for the given type.
*
* @property list
* @type Array
*/
list: {
type: Array,
notify: true
}
},
/**
* Actually a factory method, not a true constructor. Only runs if
* someone invokes it directly (via `new Polymer.IronMeta()`);
*/
constructor: function(config) {
if (config) {
for (var n in config) {
switch(n) {
case 'type':
case 'key':
this[n] = config[n];
break;
}
}
}
},
created: function() {
// TODO(sjmiles): good for debugging?
this._metaDatas = metaDatas;
this._metaArrays = metaArrays;
},
_keyChanged: function(key) {
this._setValue(this._metaData && this._metaData[key]);
},
_typeChanged: function(type) {
this._metaData = metaDatas[type];
this.list = metaArrays[type];
if (this.key) {
this._keyChanged(this.key);
}
},
/**
* Retrieves meta data value by key.
*
* @method byKey
* @param {String} key The key of the meta-data to be returned.
* @returns *
*/
byKey: function(key) {
return this._metaData && this._metaData[key];
}
});
})();
</script>

View file

@ -19,10 +19,14 @@
// If less than 200, this happens on the home page // If less than 200, this happens on the home page
// Need to fix those before this can be set to 0 // Need to fix those before this can be set to 0
if (window.AppInfo && AppInfo.isNativeApp && $.browser.safari) {
return 10000;
}
var screens = $.browser.mobile ? 2 : 1; var screens = $.browser.mobile ? 2 : 1;
// This helps eliminate the draw-in effect as you scroll // This helps eliminate the draw-in effect as you scroll
return screen.availHeight * screens; return Math.max(screen.availHeight * screens, 1000);
} }
$.fn.unveil = function () { $.fn.unveil = function () {

View file

@ -0,0 +1,56 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-behaviors/iron-button-state.html">
<script>
/** @polymerBehavior */
Polymer.PaperButtonBehaviorImpl = {
properties: {
_elevation: {
type: Number
}
},
observers: [
'_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)'
],
hostAttributes: {
role: 'button',
tabindex: '0'
},
_calculateElevation: function() {
var e = 1;
if (this.disabled) {
e = 0;
} else if (this.active || this.pressed) {
e = 4;
} else if (this.receivedFocusFromKeyboard) {
e = 3;
}
this._elevation = e;
}
};
/** @polymerBehavior */
Polymer.PaperButtonBehavior = [
Polymer.IronButtonState,
Polymer.IronControlState,
Polymer.PaperButtonBehaviorImpl
];
</script>

View file

@ -0,0 +1,44 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-behaviors/iron-button-state.html">
<script>
/**
* `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has keyboard focus.
*
* @polymerBehavior Polymer.PaperInkyFocusBehavior
*/
Polymer.PaperInkyFocusBehaviorImpl = {
observers: [
'_focusedChanged(receivedFocusFromKeyboard)'
],
_focusedChanged: function(receivedFocusFromKeyboard) {
if (!this.$.ink) {
return;
}
this.$.ink.holdDown = receivedFocusFromKeyboard;
}
};
/** @polymerBehavior Polymer.PaperInkyFocusBehavior */
Polymer.PaperInkyFocusBehavior = [
Polymer.IronButtonState,
Polymer.IronControlState,
Polymer.PaperInkyFocusBehaviorImpl
];
</script>

View file

@ -0,0 +1,117 @@
paper-button {
font-weight: 500;
vertical-align: middle;
}
paper-button.block {
display: block;
margin-bottom: 1em;
}
paper-button[toggles] {
transition: background-color 0.3s;
}
paper-button[toggles][active] {
background-color: rgba(0, 0, 0, 0.25);
}
paper-button.secondary {
color: #4285f4;
}
paper-button[raised].secondary {
background: #4285f4;
color: #fff;
}
paper-button[toggles][active].secondary {
background-color: rgba(66, 133, 244, 0.25);
}
paper-button[toggles][active][raised].secondary {
background-color: rgba(66, 133, 244, 0.75);
}
paper-button.submit {
color: #52B54B;
}
paper-button[raised].submit {
background: #52B54B;
color: #fff;
}
paper-button[toggles][active].submit {
background-color: rgba(82, 181, 75, 0.25);
}
paper-button[toggles][active][raised].submit {
background-color: rgba(82, 181, 75, 0.75);
}
paper-button.cancel {
color: #444;
}
paper-button[raised].cancel {
background: #444;
color: #fff;
}
paper-button[toggles][active].cancel {
background-color: rgba(68, 68, 68, 0.25);
}
paper-button[toggles][active][raised].cancel {
background-color: rgba(68, 68, 68, 0.75);
}
paper-button.hover:hover {
background: #eee;
}
paper-button.ripple::shadow paper-ripple {
color: var(--paper-pink-a200);
}
paper-button.ripple paper-ripple {
color: var(--paper-pink-a200);
}
paper-button span {
vertical-align: middle;
}
paper-button:not(.iconRight) iron-icon, paper-button:not(.iconRight) .fa {
margin-right: .5em;
}
paper-button.iconRight iron-icon, paper-button.iconRight .fa {
position: absolute;
right: 5px;
top: 5px;
}
.clearButton {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
outline: none;
color: inherit;
width: 100%;
}
.clearLink {
text-decoration: none;
font-weight: inherit !important;
}
paper-button.mini {
min-width: initial;
}
paper-button.mini .content {
padding: 0.35em 0.9em;
}

View file

@ -0,0 +1,177 @@
<!--
@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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
<!--
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
`paper-button` is a button. When the user touches the button, a ripple effect emanates
from the point of contact. It may be flat or raised. A raised button is styled with a
shadow.
Example:
<paper-button>flat button</paper-button>
<paper-button raised>raised button</paper-button>
<paper-button noink>No ripple effect</paper-button>
You may use custom DOM in the button body to create a variety of buttons. For example, to
create a button with an icon and some text:
<paper-button>
<core-icon icon="favorite"></core-icon>
custom button content
</paper-button>
### Styling
Style the button with CSS as you would a normal DOM element.
/* make #my-button green with yellow text */
#my-button {
background: green;
color: yellow;
}
By default, the ripple is the same color as the foreground at 25% opacity. You may
customize the color using this selector:
/* make #my-button use a blue ripple instead of foreground color */
#my-button::shadow paper-ripple {
color: blue;
}
The opacity of the ripple is not customizable via CSS.
The following custom properties and mixins are also available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-button-flat-focus-color` | Background color of a focused flat button | `--paper-grey-200`
`--paper-button` | Mixin applied to the button | `{}`
`--paper-button-disabled` | Mixin applied to the disabled button | `{}`
@demo demo/index.html
-->
<dom-module id="paper-button">
<style>
:host {
display: inline-block;
position: relative;
box-sizing: border-box;
min-width: 5.14em;
margin: 0 0.29em;
background: transparent;
text-align: center;
font: inherit;
text-transform: uppercase;
outline: none;
border-radius: 3px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
@apply(--paper-button);
}
.keyboard-focus {
font-weight: bold;
}
:host([disabled]) {
background: #eaeaea;
color: #a8a8a8;
cursor: auto;
pointer-events: none;
@apply(--paper-button-disabled);
}
:host([noink]) paper-ripple {
display: none;
}
paper-material {
border-radius: inherit;
}
.content > ::content * {
text-transform: inherit;
}
.content {
padding: 0.7em 0.57em
}
</style>
<template>
<paper-ripple></paper-ripple>
<paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated>
<content></content>
</paper-material>
</template>
</dom-module>
<script>
Polymer({
is: 'paper-button',
behaviors: [
Polymer.PaperButtonBehavior
],
properties: {
/**
* If true, the button should be styled with a shadow.
*/
raised: {
type: Boolean,
reflectToAttribute: true,
value: false,
observer: '_calculateElevation'
}
},
_calculateElevation: function() {
if (!this.raised) {
this._elevation = 0;
} else {
Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
}
},
_computeContentClass: function(receivedFocusFromKeyboard) {
var className = 'content ';
if (receivedFocusFromKeyboard) {
className += ' keyboard-focus';
}
return className;
}
});
</script>

View file

@ -0,0 +1,98 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/shadow.html">
<!--
`paper-material` is a container that renders two shadows on top of each other to
create the effect of a lifted piece of paper.
Example:
<paper-material elevation="1">
... content ...
</paper-material>
@group Paper Elements
@class paper-material
@demo demo/index.html
-->
<dom-module id="paper-material">
<style>
:host {
display: block;
position: relative;
@apply(--shadow-transition);
}
:host([elevation="1"]) {
@apply(--shadow-elevation-2dp);
}
:host([elevation="2"]) {
@apply(--shadow-elevation-4dp);
}
:host([elevation="3"]) {
@apply(--shadow-elevation-6dp);
}
:host([elevation="4"]) {
@apply(--shadow-elevation-8dp);
}
:host([elevation="5"]) {
@apply(--shadow-elevation-16dp);
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'paper-material',
properties: {
/**
* The z-depth of this element, from 0-5. Setting to 0 will remove the
* shadow, and each increasing number greater than 0 will be "deeper"
* than the last.
*
* @attribute elevation
* @type number
* @default 1
*/
elevation: {
type: Number,
reflectToAttribute: true,
value: 1
},
/**
* Set this to true to animate the shadow when setting a new
* `elevation` value.
*
* @attribute animated
* @type boolean
* @default false
*/
animated: {
type: Boolean,
reflectToAttribute: true,
value: false
}
}
});
</script>

View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
<g id="background" display="none">
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
</g>
<g id="label">
</g>
<g id="art">
<path d="M175,81H49V45h126V81z M51,79h122V47H51V79z"/>
<g>
<defs>
<rect id="SVGID_5_" x="50" y="46" width="124" height="34"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<circle opacity="0.5" clip-path="url(#SVGID_2_)" cx="84.4" cy="62.7" r="41.9"/>
<circle opacity="0.6" clip-path="url(#SVGID_2_)" cx="84.4" cy="62.7" r="26.3"/>
<circle opacity="0.6" clip-path="url(#SVGID_2_)" cx="66.4" cy="62.7" r="26.3"/>
</g>
<circle cx="50" cy="80" r="4"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -0,0 +1,716 @@
<!--
Copyright (c) 2014 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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<!--
`paper-ripple` provides a visual effect that other paper elements can
use to simulate a rippling effect emanating from the point of contact. The
effect can be visualized as a concentric circle with motion.
Example:
<paper-ripple></paper-ripple>
`paper-ripple` listens to "mousedown" and "mouseup" events so it would display ripple
effect when touches on it. You can also defeat the default behavior and
manually route the down and up actions to the ripple element. Note that it is
important if you call downAction() you will have to make sure to call
upAction() so that `paper-ripple` would end the animation loop.
Example:
<paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>
...
downAction: function(e) {
this.$.ripple.downAction({x: e.x, y: e.y});
},
upAction: function(e) {
this.$.ripple.upAction();
}
Styling ripple effect:
Use CSS color property to style the ripple:
paper-ripple {
color: #4285f4;
}
Note that CSS color property is inherited so it is not required to set it on
the `paper-ripple` element directly.
By default, the ripple is centered on the point of contact. Apply the `recenters`
attribute to have the ripple grow toward the center of its container.
<paper-ripple recenters></paper-ripple>
You can also center the ripple inside its container from the start.
<paper-ripple center></paper-ripple>
Apply `circle` class to make the rippling effect within a circle.
<paper-ripple class="circle"></paper-ripple>
@group Paper Elements
@element paper-ripple
@hero hero.svg
@demo demo/index.html
-->
<dom-module id="paper-ripple">
<!--
Fired when the animation finishes. This is useful if you want to wait until the ripple
animation finishes to perform some action.
@event transitionend
@param {Object} detail
@param {Object} detail.node The animated node
-->
<style>
:host {
display: block;
position: absolute;
border-radius: inherit;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
:host([animating]) {
/* This resolves a rendering issue in Chrome (as of 40) where the
ripple is not properly clipped by its parent (which may have
rounded corners). See: http://jsbin.com/temexa/4
Note: We only apply this style conditionally. Otherwise, the browser
will create a new compositing layer for every ripple element on the
page, and that would be bad. */
-webkit-transform: translate(0, 0);
transform: translate3d(0, 0, 0);
}
:host([noink]) {
pointer-events: none;
}
#background,
#waves,
.wave-container,
.wave {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#background,
.wave {
opacity: 0;
}
#waves,
.wave {
overflow: hidden;
}
.wave-container,
.wave {
border-radius: 50%;
}
:host(.circle) #background,
:host(.circle) #waves {
border-radius: 50%;
}
:host(.circle) .wave-container {
overflow: hidden;
}
</style>
<template>
<div id="background"></div>
<div id="waves"></div>
</template>
</dom-module>
<script>
(function() {
var Utility = {
cssColorWithAlpha: function(cssColor, alpha) {
var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (typeof alpha == 'undefined') {
alpha = 1;
}
if (!parts) {
return 'rgba(255, 255, 255, ' + alpha + ')';
}
return 'rgba(' + parts[1] + ', ' + parts[2] + ', ' + parts[3] + ', ' + alpha + ')';
},
distance: function(x1, y1, x2, y2) {
var xDelta = (x1 - x2);
var yDelta = (y1 - y2);
return Math.sqrt(xDelta * xDelta + yDelta * yDelta);
},
now: (function() {
if (window.performance && window.performance.now) {
return window.performance.now.bind(window.performance);
}
return Date.now;
})()
};
/**
* @param {HTMLElement} element
* @constructor
*/
function ElementMetrics(element) {
this.element = element;
this.width = this.boundingRect.width;
this.height = this.boundingRect.height;
this.size = Math.max(this.width, this.height);
}
ElementMetrics.prototype = {
get boundingRect () {
return this.element.getBoundingClientRect();
},
furthestCornerDistanceFrom: function(x, y) {
var topLeft = Utility.distance(x, y, 0, 0);
var topRight = Utility.distance(x, y, this.width, 0);
var bottomLeft = Utility.distance(x, y, 0, this.height);
var bottomRight = Utility.distance(x, y, this.width, this.height);
return Math.max(topLeft, topRight, bottomLeft, bottomRight);
}
};
/**
* @param {HTMLElement} element
* @constructor
*/
function Ripple(element) {
this.element = element;
this.color = window.getComputedStyle(element).color;
this.wave = document.createElement('div');
this.waveContainer = document.createElement('div');
this.wave.style.backgroundColor = this.color;
this.wave.classList.add('wave');
this.waveContainer.classList.add('wave-container');
Polymer.dom(this.waveContainer).appendChild(this.wave);
this.resetInteractionState();
}
Ripple.MAX_RADIUS = 300;
Ripple.prototype = {
get recenters() {
return this.element.recenters;
},
get center() {
return this.element.center;
},
get mouseDownElapsed() {
var elapsed;
if (!this.mouseDownStart) {
return 0;
}
elapsed = Utility.now() - this.mouseDownStart;
if (this.mouseUpStart) {
elapsed -= this.mouseUpElapsed;
}
return elapsed;
},
get mouseUpElapsed() {
return this.mouseUpStart ?
Utility.now () - this.mouseUpStart : 0;
},
get mouseDownElapsedSeconds() {
return this.mouseDownElapsed / 1000;
},
get mouseUpElapsedSeconds() {
return this.mouseUpElapsed / 1000;
},
get mouseInteractionSeconds() {
return this.mouseDownElapsedSeconds + this.mouseUpElapsedSeconds;
},
get initialOpacity() {
return this.element.initialOpacity;
},
get opacityDecayVelocity() {
return this.element.opacityDecayVelocity;
},
get radius() {
var width2 = this.containerMetrics.width * this.containerMetrics.width;
var height2 = this.containerMetrics.height * this.containerMetrics.height;
var waveRadius = Math.min(
Math.sqrt(width2 + height2),
Ripple.MAX_RADIUS
) * 1.1 + 5;
var duration = 1.1 - 0.2 * (waveRadius / Ripple.MAX_RADIUS);
var timeNow = this.mouseInteractionSeconds / duration;
var size = waveRadius * (1 - Math.pow(80, -timeNow));
return Math.abs(size);
},
get opacity() {
if (!this.mouseUpStart) {
return this.initialOpacity;
}
return Math.max(
0,
this.initialOpacity - this.mouseUpElapsedSeconds * this.opacityDecayVelocity
);
},
get outerOpacity() {
// Linear increase in background opacity, capped at the opacity
// of the wavefront (waveOpacity).
var outerOpacity = this.mouseUpElapsedSeconds * 0.3;
var waveOpacity = this.opacity;
return Math.max(
0,
Math.min(outerOpacity, waveOpacity)
);
},
get isOpacityFullyDecayed() {
return this.opacity < 0.01 &&
this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
},
get isRestingAtMaxRadius() {
return this.opacity >= this.initialOpacity &&
this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
},
get isAnimationComplete() {
return this.mouseUpStart ?
this.isOpacityFullyDecayed : this.isRestingAtMaxRadius;
},
get translationFraction() {
return Math.min(
1,
this.radius / this.containerMetrics.size * 2 / Math.sqrt(2)
);
},
get xNow() {
if (this.xEnd) {
return this.xStart + this.translationFraction * (this.xEnd - this.xStart);
}
return this.xStart;
},
get yNow() {
if (this.yEnd) {
return this.yStart + this.translationFraction * (this.yEnd - this.yStart);
}
return this.yStart;
},
get isMouseDown() {
return this.mouseDownStart && !this.mouseUpStart;
},
resetInteractionState: function() {
this.maxRadius = 0;
this.mouseDownStart = 0;
this.mouseUpStart = 0;
this.xStart = 0;
this.yStart = 0;
this.xEnd = 0;
this.yEnd = 0;
this.slideDistance = 0;
this.containerMetrics = new ElementMetrics(this.element);
},
draw: function() {
var scale;
var translateString;
var dx;
var dy;
this.wave.style.opacity = this.opacity;
scale = this.radius / (this.containerMetrics.size / 2);
dx = this.xNow - (this.containerMetrics.width / 2);
dy = this.yNow - (this.containerMetrics.height / 2);
// 2d transform for safari because of border-radius and overflow:hidden clipping bug.
// https://bugs.webkit.org/show_bug.cgi?id=98538
this.waveContainer.style.webkitTransform = 'translate(' + dx + 'px, ' + dy + 'px)';
this.waveContainer.style.transform = 'translate3d(' + dx + 'px, ' + dy + 'px, 0)';
this.wave.style.webkitTransform = 'scale(' + scale + ',' + scale + ')';
this.wave.style.transform = 'scale3d(' + scale + ',' + scale + ',1)';
},
/** @param {Event=} event */
downAction: function(event) {
var xCenter = this.containerMetrics.width / 2;
var yCenter = this.containerMetrics.height / 2;
this.resetInteractionState();
this.mouseDownStart = Utility.now();
if (this.center) {
this.xStart = xCenter;
this.yStart = yCenter;
this.slideDistance = Utility.distance(
this.xStart, this.yStart, this.xEnd, this.yEnd
);
} else {
this.xStart = event ?
event.detail.x - this.containerMetrics.boundingRect.left :
this.containerMetrics.width / 2;
this.yStart = event ?
event.detail.y - this.containerMetrics.boundingRect.top :
this.containerMetrics.height / 2;
}
if (this.recenters) {
this.xEnd = xCenter;
this.yEnd = yCenter;
this.slideDistance = Utility.distance(
this.xStart, this.yStart, this.xEnd, this.yEnd
);
}
this.maxRadius = this.containerMetrics.furthestCornerDistanceFrom(
this.xStart,
this.yStart
);
this.waveContainer.style.top =
(this.containerMetrics.height - this.containerMetrics.size) / 2 + 'px';
this.waveContainer.style.left =
(this.containerMetrics.width - this.containerMetrics.size) / 2 + 'px';
this.waveContainer.style.width = this.containerMetrics.size + 'px';
this.waveContainer.style.height = this.containerMetrics.size + 'px';
},
/** @param {Event=} event */
upAction: function(event) {
if (!this.isMouseDown) {
return;
}
this.mouseUpStart = Utility.now();
},
remove: function() {
Polymer.dom(this.waveContainer.parentNode).removeChild(
this.waveContainer
);
}
};
Polymer({
is: 'paper-ripple',
behaviors: [
Polymer.IronA11yKeysBehavior
],
properties: {
/**
* The initial opacity set on the wave.
*
* @attribute initialOpacity
* @type number
* @default 0.25
*/
initialOpacity: {
type: Number,
value: 0.25
},
/**
* How fast (opacity per second) the wave fades out.
*
* @attribute opacityDecayVelocity
* @type number
* @default 0.8
*/
opacityDecayVelocity: {
type: Number,
value: 0.8
},
/**
* If true, ripples will exhibit a gravitational pull towards
* the center of their container as they fade away.
*
* @attribute recenters
* @type boolean
* @default false
*/
recenters: {
type: Boolean,
value: false
},
/**
* If true, ripples will center inside its container
*
* @attribute recenters
* @type boolean
* @default false
*/
center: {
type: Boolean,
value: false
},
/**
* A list of the visual ripples.
*
* @attribute ripples
* @type Array
* @default []
*/
ripples: {
type: Array,
value: function() {
return [];
}
},
/**
* True when there are visible ripples animating within the
* element.
*/
animating: {
type: Boolean,
readOnly: true,
reflectToAttribute: true,
value: false
},
/**
* If true, the ripple will remain in the "down" state until `holdDown`
* is set to false again.
*/
holdDown: {
type: Boolean,
value: false,
observer: '_holdDownChanged'
},
_animating: {
type: Boolean
},
_boundAnimate: {
type: Function,
value: function() {
return this.animate.bind(this);
}
}
},
get target () {
var ownerRoot = Polymer.dom(this).getOwnerRoot();
var target;
if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
target = ownerRoot.host;
} else {
target = this.parentNode;
}
return target;
},
keyBindings: {
'enter:keydown': '_onEnterKeydown',
'space:keydown': '_onSpaceKeydown',
'space:keyup': '_onSpaceKeyup'
},
attached: function() {
this.listen(this.target, 'up', 'upAction');
this.listen(this.target, 'down', 'downAction');
if (!this.target.hasAttribute('noink')) {
this.keyEventTarget = this.target;
}
},
get shouldKeepAnimating () {
for (var index = 0; index < this.ripples.length; ++index) {
if (!this.ripples[index].isAnimationComplete) {
return true;
}
}
return false;
},
simulatedRipple: function() {
this.downAction(null);
// Please see polymer/polymer#1305
this.async(function() {
this.upAction();
}, 1);
},
/** @param {Event=} event */
downAction: function(event) {
if (this.holdDown && this.ripples.length > 0) {
return;
}
var ripple = this.addRipple();
ripple.downAction(event);
if (!this._animating) {
this.animate();
}
},
/** @param {Event=} event */
upAction: function(event) {
if (this.holdDown) {
return;
}
this.ripples.forEach(function(ripple) {
ripple.upAction(event);
});
this.animate();
},
onAnimationComplete: function() {
this._animating = false;
this.$.background.style.backgroundColor = null;
this.fire('transitionend');
},
addRipple: function() {
var ripple = new Ripple(this);
Polymer.dom(this.$.waves).appendChild(ripple.waveContainer);
this.$.background.style.backgroundColor = ripple.color;
this.ripples.push(ripple);
this._setAnimating(true);
return ripple;
},
removeRipple: function(ripple) {
var rippleIndex = this.ripples.indexOf(ripple);
if (rippleIndex < 0) {
return;
}
this.ripples.splice(rippleIndex, 1);
ripple.remove();
if (!this.ripples.length) {
this._setAnimating(false);
}
},
animate: function() {
var index;
var ripple;
this._animating = true;
for (index = 0; index < this.ripples.length; ++index) {
ripple = this.ripples[index];
ripple.draw();
this.$.background.style.opacity = ripple.outerOpacity;
if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) {
this.removeRipple(ripple);
}
}
if (!this.shouldKeepAnimating && this.ripples.length === 0) {
this.onAnimationComplete();
} else {
window.requestAnimationFrame(this._boundAnimate);
}
},
_onEnterKeydown: function() {
this.downAction();
this.async(this.upAction, 1);
},
_onSpaceKeydown: function() {
this.downAction();
},
_onSpaceKeyup: function() {
this.upAction();
},
_holdDownChanged: function(holdDown) {
if (holdDown) {
this.downAction();
} else {
this.upAction();
}
}
});
})();
</script>

View file

@ -0,0 +1,96 @@
<!--
@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
-->
<link rel="import" href="../paper-styles-classes.html">
<!--
A set of base styles that are applied to the document and standard elements that
match the Material Design spec.
-->
<style>
/*
Note that there is a lot of style duplication here. The hope is that the Polymer
0.8 styling solution will allow for inheritance of properties so that we can
eventually avoid it.
*/
/* Mixins */
/* [paper-font] */
body {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
}
/* [paper-font=display2] */
h1 {
font-size: 45px;
font-weight: 400;
letter-spacing: -.018em;
line-height: 48px;
}
/* [paper-font=display1] */
h2 {
font-size: 34px;
font-weight: 400;
letter-spacing: -.01em;
line-height: 40px;
}
/* [paper-font=headline] */
h3 {
font-size: 24px;
font-weight: 400;
letter-spacing: -.012em;
line-height: 32px;
}
/* [paper-font=subhead] */
h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
/* [paper-font=body2] */
h5, h6 {
font-size: 14px;
font-weight: 500;
line-height: 24px;
}
/* [paper-font=button] */
a {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.018em;
line-height: 24px;
text-transform: uppercase;
}
/* Overrides */
body, a {
color: #212121;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0 0 20px 0;
}
h1, h2, h3, h4, h5, h6, a {
text-rendering: optimizeLegibility;
}
a {
text-decoration: none;
}
</style>

View file

@ -0,0 +1,302 @@
<!--
@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
-->
<style>
/*******************************
Flex Layout
*******************************/
html /deep/ .layout.horizontal,
html /deep/ .layout.horizontal-reverse,
html /deep/ .layout.vertical,
html /deep/ .layout.vertical-reverse {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
html /deep/ .layout.inline {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
html /deep/ .layout.horizontal {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
html /deep/ .layout.horizontal-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
html /deep/ .layout.vertical {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
html /deep/ .layout.vertical-reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
html /deep/ .layout.wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
html /deep/ .layout.wrap-reverse {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
html /deep/ .flex-auto {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
html /deep/ .flex-none {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
html /deep/ .flex,
html /deep/ .flex-1 {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
html /deep/ .flex-2 {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
}
html /deep/ .flex-3 {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
}
html /deep/ .flex-4 {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
}
html /deep/ .flex-5 {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
}
html /deep/ .flex-6 {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
}
html /deep/ .flex-7 {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
}
html /deep/ .flex-8 {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
}
html /deep/ .flex-9 {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
}
html /deep/ .flex-10 {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
}
html /deep/ .flex-11 {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
}
html /deep/ .flex-12 {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
}
/* alignment in cross axis */
html /deep/ .layout.start {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
html /deep/ .layout.center,
html /deep/ .layout.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
html /deep/ .layout.end {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* alignment in main axis */
html /deep/ .layout.start-justified {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
html /deep/ .layout.center-justified,
html /deep/ .layout.center-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
html /deep/ .layout.end-justified {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
html /deep/ .layout.around-justified {
-ms-flex-pack: around;
-webkit-justify-content: space-around;
justify-content: space-around;
}
html /deep/ .layout.justified {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* self alignment */
html /deep/ .self-start {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
html /deep/ .self-center {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
}
html /deep/ .self-end {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
}
html /deep/ .self-stretch {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
}
/*******************************
Other Layout
*******************************/
html /deep/ .block {
display: block;
}
/* IE 10 support for HTML5 hidden attr */
html /deep/ [hidden] {
display: none !important;
}
html /deep/ .invisible {
visibility: hidden !important;
}
html /deep/ .relative {
position: relative;
}
html /deep/ .fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
body.fullbleed {
margin: 0;
height: 100vh;
}
html /deep/ .scroll {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top {
position: fixed;
}
html /deep/ .fixed-top {
top: 0;
left: 0;
right: 0;
}
html /deep/ .fixed-right {
top: 0;
right: 0;
botttom: 0;
}
html /deep/ .fixed-bottom {
right: 0;
bottom: 0;
left: 0;
}
html /deep/ .fixed-left {
top: 0;
botttom: 0;
left: 0;
}
</style>

View file

@ -0,0 +1,39 @@
<!--
@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
-->
<style>
.shadow-transition {
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.shadow-elevation-1 {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
.shadow-elevation-2 {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2),
0 6px 10px 0 rgba(0, 0, 0, 0.3);
}
.shadow-elevation-3 {
box-shadow: 0 11px 7px 0 rgba(0, 0, 0, 0.19),
0 13px 25px 0 rgba(0, 0, 0, 0.3);
}
.shadow-elevation-4 {
box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.17),
0 20px 40px 0 rgba(0, 0, 0, 0.3);
}
.shadow-elevation-5 {
box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15),
0 27px 55px 0 rgba(0, 0, 0, 0.3);
}
</style>

View file

@ -0,0 +1,171 @@
<!--
@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
-->
<!-- TODO(nevir): Should we upgrade Polymer/font-roboto to the final font? -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Inconsolata:400,700">
<!--
Typographic styles are provided matching the Material Design standard styles:
http://www.google.com/design/spec/style/typography.html#typography-standard-styles
To make use of them, apply a `paper-font-<style>` class to elements, matching
the font style you wish it to inherit.
<header class="paper-font-display2">Hey there!</header>
Note that these are English/Latin centric styles. You may need to further adjust
line heights and weights for CJK typesetting. See the notes in the Material
Design typography section.
-->
<style>
.paper-font-display4,
.paper-font-display3,
.paper-font-display2,
.paper-font-display1,
.paper-font-headline,
.paper-font-title,
.paper-font-subhead,
.paper-font-body2,
.paper-font-body1,
.paper-font-caption,
.paper-font-menu,
.paper-font-button {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
}
.paper-font-code2,
.paper-font-code1 {
font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo', monospace;
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
}
/* Opt for better kerning for headers & other short labels. */
.paper-font-display4,
.paper-font-display3,
.paper-font-display2,
.paper-font-display1,
.paper-font-headline,
.paper-font-title,
.paper-font-subhead,
.paper-font-menu,
.paper-font-button {
text-rendering: optimizeLegibility;
}
/*
"Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
styles. All other styles should exist as single lines."
*/
.paper-font-display4,
.paper-font-display3,
.paper-font-title,
.paper-font-caption,
.paper-font-menu,
.paper-font-button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.paper-font-display4 {
font-size: 112px;
font-weight: 300;
letter-spacing: -.044em;
line-height: 120px;
}
.paper-font-display3 {
font-size: 56px;
font-weight: 400;
letter-spacing: -.026em;
line-height: 60px;
}
.paper-font-display2 {
font-size: 45px;
font-weight: 400;
letter-spacing: -.018em;
line-height: 48px;
}
.paper-font-display1 {
font-size: 34px;
font-weight: 400;
letter-spacing: -.01em;
line-height: 40px;
}
.paper-font-headline {
font-size: 24px;
font-weight: 400;
letter-spacing: -.012em;
line-height: 32px;
}
.paper-font-title {
font-size: 20px;
font-weight: 500;
line-height: 28px;
}
.paper-font-subhead {
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.paper-font-body2 {
font-size: 14px;
font-weight: 500;
line-height: 24px;
}
.paper-font-body1 {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.paper-font-caption {
font-size: 12px;
font-weight: 400;
letter-spacing: 0.011em;
line-height: 20px;
}
.paper-font-menu {
font-size: 13px;
font-weight: 500;
line-height: 24px;
}
.paper-font-button {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.018em;
line-height: 24px;
text-transform: uppercase;
}
.paper-font-code2 {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.paper-font-code1 {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
</style>

View file

@ -0,0 +1,333 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<style is="custom-style">
:root {
/* Material Design color palette for Google products */
--google-red-100: #f4c7c3;
--google-red-300: #e67c73;
--google-red-500: #db4437;
--google-red-700: #c53929;
--google-blue-100: #c6dafc;
--google-blue-300: #7baaf7;
--google-blue-500: #4285f4;
--google-blue-700: #3367d6;
--google-green-100: #b7e1cd;
--google-green-300: #57bb8a;
--google-green-500: #0f9d58;
--google-green-700: #0b8043;
--google-yellow-100: #fce8b2;
--google-yellow-300: #f7cb4d;
--google-yellow-500: #f4b400;
--google-yellow-700: #f09300;
--google-grey-100: #f5f5f5;
--google-grey-300: #e0e0e0;
--google-grey-500: #9e9e9e;
--google-grey-700: #616161;
/* Material Design color palette from online spec document */
--paper-red-50: #ffebee;
--paper-red-100: #ffcdd2;
--paper-red-200: #ef9a9a;
--paper-red-300: #e57373;
--paper-red-400: #ef5350;
--paper-red-500: #f44336;
--paper-red-600: #e53935;
--paper-red-700: #d32f2f;
--paper-red-800: #c62828;
--paper-red-900: #b71c1c;
--paper-red-a100: #ff8a80;
--paper-red-a200: #ff5252;
--paper-red-a400: #ff1744;
--paper-red-a700: #d50000;
--paper-pink-50: #fce4ec;
--paper-pink-100: #f8bbd0;
--paper-pink-200: #f48fb1;
--paper-pink-300: #f06292;
--paper-pink-400: #ec407a;
--paper-pink-500: #e91e63;
--paper-pink-600: #d81b60;
--paper-pink-700: #c2185b;
--paper-pink-800: #ad1457;
--paper-pink-900: #880e4f;
--paper-pink-a100: #ff80ab;
--paper-pink-a200: #ff4081;
--paper-pink-a400: #f50057;
--paper-pink-a700: #c51162;
--paper-purple-50: #f3e5f5;
--paper-purple-100: #e1bee7;
--paper-purple-200: #ce93d8;
--paper-purple-300: #ba68c8;
--paper-purple-400: #ab47bc;
--paper-purple-500: #9c27b0;
--paper-purple-600: #8e24aa;
--paper-purple-700: #7b1fa2;
--paper-purple-800: #6a1b9a;
--paper-purple-900: #4a148c;
--paper-purple-a100: #ea80fc;
--paper-purple-a200: #e040fb;
--paper-purple-a400: #d500f9;
--paper-purple-a700: #aa00ff;
--paper-deep-purple-50: #ede7f6;
--paper-deep-purple-100: #d1c4e9;
--paper-deep-purple-200: #b39ddb;
--paper-deep-purple-300: #9575cd;
--paper-deep-purple-400: #7e57c2;
--paper-deep-purple-500: #673ab7;
--paper-deep-purple-600: #5e35b1;
--paper-deep-purple-700: #512da8;
--paper-deep-purple-800: #4527a0;
--paper-deep-purple-900: #311b92;
--paper-deep-purple-a100: #b388ff;
--paper-deep-purple-a200: #7c4dff;
--paper-deep-purple-a400: #651fff;
--paper-deep-purple-a700: #6200ea;
--paper-indigo-50: #e8eaf6;
--paper-indigo-100: #c5cae9;
--paper-indigo-200: #9fa8da;
--paper-indigo-300: #7986cb;
--paper-indigo-400: #5c6bc0;
--paper-indigo-500: #3f51b5;
--paper-indigo-600: #3949ab;
--paper-indigo-700: #303f9f;
--paper-indigo-800: #283593;
--paper-indigo-900: #1a237e;
--paper-indigo-a100: #8c9eff;
--paper-indigo-a200: #536dfe;
--paper-indigo-a400: #3d5afe;
--paper-indigo-a700: #304ffe;
--paper-blue-50: #e3f2fd;
--paper-blue-100: #bbdefb;
--paper-blue-200: #90caf9;
--paper-blue-300: #64b5f6;
--paper-blue-400: #42a5f5;
--paper-blue-500: #2196f3;
--paper-blue-600: #1e88e5;
--paper-blue-700: #1976d2;
--paper-blue-800: #1565c0;
--paper-blue-900: #0d47a1;
--paper-blue-a100: #82b1ff;
--paper-blue-a200: #448aff;
--paper-blue-a400: #2979ff;
--paper-blue-a700: #2962ff;
--paper-light-blue-50: #e1f5fe;
--paper-light-blue-100: #b3e5fc;
--paper-light-blue-200: #81d4fa;
--paper-light-blue-300: #4fc3f7;
--paper-light-blue-400: #29b6f6;
--paper-light-blue-500: #03a9f4;
--paper-light-blue-600: #039be5;
--paper-light-blue-700: #0288d1;
--paper-light-blue-800: #0277bd;
--paper-light-blue-900: #01579b;
--paper-light-blue-a100: #80d8ff;
--paper-light-blue-a200: #40c4ff;
--paper-light-blue-a400: #00b0ff;
--paper-light-blue-a700: #0091ea;
--paper-cyan-50: #e0f7fa;
--paper-cyan-100: #b2ebf2;
--paper-cyan-200: #80deea;
--paper-cyan-300: #4dd0e1;
--paper-cyan-400: #26c6da;
--paper-cyan-500: #00bcd4;
--paper-cyan-600: #00acc1;
--paper-cyan-700: #0097a7;
--paper-cyan-800: #00838f;
--paper-cyan-900: #006064;
--paper-cyan-a100: #84ffff;
--paper-cyan-a200: #18ffff;
--paper-cyan-a400: #00e5ff;
--paper-cyan-a700: #00b8d4;
--paper-teal-50: #e0f2f1;
--paper-teal-100: #b2dfdb;
--paper-teal-200: #80cbc4;
--paper-teal-300: #4db6ac;
--paper-teal-400: #26a69a;
--paper-teal-500: #009688;
--paper-teal-600: #00897b;
--paper-teal-700: #00796b;
--paper-teal-800: #00695c;
--paper-teal-900: #004d40;
--paper-teal-a100: #a7ffeb;
--paper-teal-a200: #64ffda;
--paper-teal-a400: #1de9b6;
--paper-teal-a700: #00bfa5;
--paper-green-50: #e8f5e9;
--paper-green-100: #c8e6c9;
--paper-green-200: #a5d6a7;
--paper-green-300: #81c784;
--paper-green-400: #66bb6a;
--paper-green-500: #4caf50;
--paper-green-600: #43a047;
--paper-green-700: #388e3c;
--paper-green-800: #2e7d32;
--paper-green-900: #1b5e20;
--paper-green-a100: #b9f6ca;
--paper-green-a200: #69f0ae;
--paper-green-a400: #00e676;
--paper-green-a700: #00c853;
--paper-light-green-50: #f1f8e9;
--paper-light-green-100: #dcedc8;
--paper-light-green-200: #c5e1a5;
--paper-light-green-300: #aed581;
--paper-light-green-400: #9ccc65;
--paper-light-green-500: #8bc34a;
--paper-light-green-600: #7cb342;
--paper-light-green-700: #689f38;
--paper-light-green-800: #558b2f;
--paper-light-green-900: #33691e;
--paper-light-green-a100: #ccff90;
--paper-light-green-a200: #b2ff59;
--paper-light-green-a400: #76ff03;
--paper-light-green-a700: #64dd17;
--paper-lime-50: #f9fbe7;
--paper-lime-100: #f0f4c3;
--paper-lime-200: #e6ee9c;
--paper-lime-300: #dce775;
--paper-lime-400: #d4e157;
--paper-lime-500: #cddc39;
--paper-lime-600: #c0ca33;
--paper-lime-700: #afb42b;
--paper-lime-800: #9e9d24;
--paper-lime-900: #827717;
--paper-lime-a100: #f4ff81;
--paper-lime-a200: #eeff41;
--paper-lime-a400: #c6ff00;
--paper-lime-a700: #aeea00;
--paper-yellow-50: #fffde7;
--paper-yellow-100: #fff9c4;
--paper-yellow-200: #fff59d;
--paper-yellow-300: #fff176;
--paper-yellow-400: #ffee58;
--paper-yellow-500: #ffeb3b;
--paper-yellow-600: #fdd835;
--paper-yellow-700: #fbc02d;
--paper-yellow-800: #f9a825;
--paper-yellow-900: #f57f17;
--paper-yellow-a100: #ffff8d;
--paper-yellow-a200: #ffff00;
--paper-yellow-a400: #ffea00;
--paper-yellow-a700: #ffd600;
--paper-amber-50: #fff8e1;
--paper-amber-100: #ffecb3;
--paper-amber-200: #ffe082;
--paper-amber-300: #ffd54f;
--paper-amber-400: #ffca28;
--paper-amber-500: #ffc107;
--paper-amber-600: #ffb300;
--paper-amber-700: #ffa000;
--paper-amber-800: #ff8f00;
--paper-amber-900: #ff6f00;
--paper-amber-a100: #ffe57f;
--paper-amber-a200: #ffd740;
--paper-amber-a400: #ffc400;
--paper-amber-a700: #ffab00;
--paper-orange-50: #fff3e0;
--paper-orange-100: #ffe0b2;
--paper-orange-200: #ffcc80;
--paper-orange-300: #ffb74d;
--paper-orange-400: #ffa726;
--paper-orange-500: #ff9800;
--paper-orange-600: #fb8c00;
--paper-orange-700: #f57c00;
--paper-orange-800: #ef6c00;
--paper-orange-900: #e65100;
--paper-orange-a100: #ffd180;
--paper-orange-a200: #ffab40;
--paper-orange-a400: #ff9100;
--paper-orange-a700: #ff6500;
--paper-deep-orange-50: #ff5722;
--paper-deep-orange-100: #fbe9e7;
--paper-deep-orange-200: #ffccbc;
--paper-deep-orange-300: #ff8a65;
--paper-deep-orange-400: #ff7043;
--paper-deep-orange-500: #ff5722;
--paper-deep-orange-600: #f4511e;
--paper-deep-orange-700: #e64a19;
--paper-deep-orange-800: #d84315;
--paper-deep-orange-900: #bf360c;
--paper-deep-orange-a100: #ff9e80;
--paper-deep-orange-a200: #ff6e40;
--paper-deep-orange-a400: #ff3d00;
--paper-deep-orange-a700: #dd2c00;
--paper-brown-50: #efebe9;
--paper-brown-100: #d7ccc8;
--paper-brown-200: #bcaaa4;
--paper-brown-300: #a1887f;
--paper-brown-400: #8d6e63;
--paper-brown-500: #795548;
--paper-brown-600: #6d4c41;
--paper-brown-700: #5d4037;
--paper-brown-800: #4e342e;
--paper-brown-900: #3e2723;
--paper-grey-50: #fafafa;
--paper-grey-100: #f5f5f5;
--paper-grey-200: #eeeeee;
--paper-grey-300: #e0e0e0;
--paper-grey-400: #bdbdbd;
--paper-grey-500: #9e9e9e;
--paper-grey-600: #757575;
--paper-grey-700: #616161;
--paper-grey-800: #424242;
--paper-grey-900: #212121;
--paper-blue-grey-50: #eceff1;
--paper-blue-grey-100: #cfd8dc;
--paper-blue-grey-200: #b0bec5;
--paper-blue-grey-300: #90a4ae;
--paper-blue-grey-400: #78909c;
--paper-blue-grey-500: #607d8b;
--paper-blue-grey-600: #546e7a;
--paper-blue-grey-700: #455a64;
--paper-blue-grey-800: #37474f;
--paper-blue-grey-900: #263238;
/* opacity for dark text on a light background */
--dark-divider-opacity: 0.12;
--dark-disabled-opacity: 0.26; /* or hint text */
--dark-secondary-opacity: 0.54; /* or icon */
--dark-primary-opacity: 0.87;
/* opacity for light text on a dark background */
--light-divider-opacity: 0.12;
--light-disabled-opacity: 0.3; /* or hint text */
--light-secondary-opacity: 0.7; /* or icon */
--light-primary-opacity: 1.0;
}
</style>

View file

@ -0,0 +1,39 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<style is="custom-style">
:root {
--dark-primary-color: #303f9f;
--default-primary-color: #3f51b5;
--light-primary-color: #c5cae9;
--text-primary-color: #ffffff;
--accent-color: #ff4081;
--primary-background-color: #ffffff;
--primary-text-color: #212121;
--secondary-text-color: #757575;
--disabled-text-color: #bdbdbd;
--divider-color: #e0e0e0;
}
</style>

View file

@ -0,0 +1,14 @@
<!--
@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
-->
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="classes/typography.html">
<link rel="import" href="classes/shadow.html">

View file

@ -0,0 +1,17 @@
<!--
@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
-->
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="color.html">
<link rel="import" href="default-theme.html">
<link rel="import" href="shadow.html">
<link rel="import" href="typography.html">

View file

@ -0,0 +1,61 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<style is="custom-style">
:root {
--shadow-transition: {
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
};
/* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
--shadow-elevation-2dp: {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
};
--shadow-elevation-3dp: {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
0 1px 8px 0 rgba(0, 0, 0, 0.12),
0 3px 3px -2px rgba(0, 0, 0, 0.4);
};
--shadow-elevation-4dp: {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.4);
};
--shadow-elevation-6dp: {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
0 1px 18px 0 rgba(0, 0, 0, 0.12),
0 3px 5px -1px rgba(0, 0, 0, 0.4);
};
--shadow-elevation-8dp: {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.4);
};
--shadow-elevation-16dp: {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
0 6px 30px 5px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.4);
};
}
</style>

View file

@ -0,0 +1,240 @@
<!--
@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
-->
<!-- TODO(nevir): Should we upgrade Polymer/font-roboto to the final font? -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
<link rel="import" href="../polymer/polymer.html">
<style is="custom-style">
:root {
/* Shared Styles */
/*
Unfortunately, we can't make use of these yet - sibling properties aren't
evaluated. See https://github.com/Polymer/polymer/issues/1399
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
};
--paper-font-common-code: {
font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo', monospace;
-webkit-font-smoothing: antialiased;
};
--paper-font-common-expensive-kerning: {
text-rendering: optimizeLegibility;
};
--paper-font-common-nowrap: {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
};
*/
/* Material Font Styles */
--paper-font-display4: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 112px;
font-weight: 300;
letter-spacing: -.044em;
line-height: 120px;
};
--paper-font-display3: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 56px;
font-weight: 400;
letter-spacing: -.026em;
line-height: 60px;
};
--paper-font-display2: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
font-size: 45px;
font-weight: 400;
letter-spacing: -.018em;
line-height: 48px;
};
--paper-font-display1: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
font-size: 34px;
font-weight: 400;
letter-spacing: -.01em;
line-height: 40px;
};
--paper-font-headline: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
font-size: 24px;
font-weight: 400;
letter-spacing: -.012em;
line-height: 32px;
};
--paper-font-title: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
font-weight: 500;
line-height: 28px;
};
--paper-font-subhead: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
font-size: 16px;
font-weight: 400;
line-height: 24px;
};
--paper-font-body2: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
font-weight: 500;
line-height: 24px;
};
--paper-font-body1: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
font-weight: 400;
line-height: 20px;
};
--paper-font-caption: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.011em;
line-height: 20px;
};
--paper-font-menu: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
font-weight: 500;
line-height: 24px;
};
--paper-font-button: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.018em;
line-height: 24px;
text-transform: uppercase;
};
--paper-font-code2: {
/* @apply(--paper-font-common-code); */
font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo', monospace;
-webkit-font-smoothing: antialiased;
font-size: 14px;
font-weight: 700;
line-height: 20px;
};
--paper-font-code1: {
/* @apply(--paper-font-common-code); */
font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo', monospace;
-webkit-font-smoothing: antialiased;
font-size: 14px;
font-weight: 500;
line-height: 20px;
};
}
</style>

View file

@ -4,7 +4,9 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <body>
<div id="tvNextUpPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-require="scripts/tvlatest"> <div id="tvNextUpPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-require="scripts/tvlatest,css!thirdparty/paper-button/paper-button-style">
<link rel="import" href="thirdparty/paper-button/paper-button.html">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="tvrecommended.html">${TabSuggestions}</a> <a href="tvrecommended.html">${TabSuggestions}</a>
<a href="#" class="ui-btn-active">${TabLatest}</a> <a href="#" class="ui-btn-active">${TabLatest}</a>
@ -17,11 +19,14 @@
</div> </div>
<div data-role="content"> <div data-role="content">
<div class="ehsContent"> <div class="ehsContent">
<div>
<h1 class="listHeader firstListHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestEpisodes}</h1> <div class="homePageSection">
<a href="#" class="accentButton categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</a> <div>
</div> <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestEpisodes}</h1>
<div id="latestEpisodes" class="itemsContainer"> <paper-button raised class="secondary mini categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
</div>
<div id="latestEpisodes" class="itemsContainer">
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -4,7 +4,9 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <body>
<div id="tvRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-require="scripts/tvrecommended"> <div id="tvRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-require="scripts/tvrecommended,css!thirdparty/paper-button/paper-button-style">
<link rel="import" href="thirdparty/paper-button/paper-button.html">
<div class="libraryViewNav globalNav" style="display: none;"> <div class="libraryViewNav globalNav" style="display: none;">
<a href="index.html">${TabHome}</a> <a href="index.html">${TabHome}</a>
@ -28,8 +30,8 @@
<div id="resumableSection" style="display: none;" class="scopedContent homePageSection"> <div id="resumableSection" style="display: none;" class="scopedContent homePageSection">
<div> <div>
<h1 class="listHeader firstListHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1> <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
<a href="#" class="accentButton categorySyncButton" data-category="Resume"><i class="fa fa-refresh"></i>${ButtonSync}</a> <paper-button raised class="secondary mini categorySyncButton" data-category="Resume"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
</div> </div>
<div id="resumableItems" class="itemsContainer"> <div id="resumableItems" class="itemsContainer">
@ -39,7 +41,7 @@
<div class="homePageSection"> <div class="homePageSection">
<div> <div>
<h1 class="listHeader nextUpHeader" style="display:inline-block;vertical-align:middle;">${HeaderNextUp}</h1> <h1 class="listHeader nextUpHeader" style="display:inline-block;vertical-align:middle;">${HeaderNextUp}</h1>
<a href="#" class="accentButton categorySyncButton" data-category="NextUp"><i class="fa fa-refresh"></i>${ButtonSync}</a> <paper-button raised class="secondary mini categorySyncButton" data-category="NextUp"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
</div> </div>
<div id="nextUpItems" class="itemsContainer"> <div id="nextUpItems" class="itemsContainer">
</div> </div>

View file

@ -35,7 +35,7 @@
.exampleCommand .fa { .exampleCommand .fa {
vertical-align: middle; vertical-align: middle;
color: #3388cc; color: #38c;
} }
.exampleCommandText { .exampleCommandText {

View file

@ -4,7 +4,7 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <body>
<div id="wizardLibraryPage" data-role="page" class="page standalonePage wizardPage mediaLibraryPage" data-require="scripts/medialibrarypage,scripts/taskbutton"> <div id="wizardLibraryPage" data-role="page" class="page standalonePage wizardPage mediaLibraryPage" data-require="scripts/medialibrarypage,scripts/taskbutton,css!thirdparty/paper-button/paper-button-style">
<div data-role="content"> <div data-role="content">
@ -14,7 +14,7 @@
<h2 style="display:inline-block;"> <h2 style="display:inline-block;">
<img src="css/images/mblogoicon.png" />${HeaderSetupLibrary} <img src="css/images/mblogoicon.png" />${HeaderSetupLibrary}
</h2> </h2>
<a href="https://github.com/MediaBrowser/Wiki/wiki/Library%20setup" target="_blank" class="accentButton accentButton-g" style="margin-top:-8px;margin-left:1em;"><i class="fa fa-info-circle"></i>${ButtonHelp}</a> <a href="https://github.com/MediaBrowser/Wiki/wiki/Library%20setup" target="_blank" class="clearLink" style="margin-top:-8px;display:inline-block;vertical-align:middle;margin-left:1em;"><paper-button raised class="secondary mini"><i class="fa fa-info-circle"></i>${ButtonHelp}</paper-button></a>
</div> </div>
<br /> <br />

View file

@ -4,7 +4,9 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <body>
<div id="wizardStartPage" data-role="page" class="page standalonePage wizardPage" data-require="scripts/wizardstartpage"> <div id="wizardStartPage" data-role="page" class="page standalonePage wizardPage" data-require="scripts/wizardstartpage,css!thirdparty/paper-button/paper-button-style">
<link rel="import" href="thirdparty/paper-button/paper-button.html">
<div data-role="content"> <div data-role="content">
@ -15,7 +17,7 @@
<h2 style="float:left;"> <h2 style="float:left;">
<img src="css/images/mblogoicon.png" />${WelcomeToProject} <img src="css/images/mblogoicon.png" />${WelcomeToProject}
</h2> </h2>
<a class="accentButton accentButton-g" href="https://github.com/MediaBrowser/Wiki/wiki/Quick%20start" target="_blank" style="float:right;margin-top:20px;"><i class="fa fa-info"></i>${ButtonQuickStartGuide}</a> <a href="https://github.com/MediaBrowser/Wiki/wiki/Quick%20start" target="_blank" class="clearLink" style="float:right;margin-top:20px;"><paper-button raised class="secondary mini"><i class="fa fa-info-circle"></i>${ButtonQuickStartGuide}</paper-button></a>
</div> </div>
<br style="clear:both;" /> <br style="clear:both;" />