google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean-up

master
Addy Osmani 2014-09-26 09:35:37 +01:00
parent 6d17f98146
commit d821eedc7f
7 changed files with 3 additions and 1883 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/styleguide/palette/_palette.scss
View File

@ -70,3 +70,4 @@ $primaryPalette: $paletteBlue;
$accentPalette: $palettePink;
$secondaryPalette: $paletteGrey;
$disabledPalette: $paletteGrey;
$pagePalette: $paletteGrey;

1376
app/styleguide/toolbar/_toolbar.scss
View File

File diff suppressed because it is too large Load Diff

114
app/styleguide/toolbar/demo.html
View File

@ -1,114 +0,0 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toolbar</title>
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
</head>
<body>
<left-nav></left-nav>
<app-bar>
<div class="main-container">
<div class="main-container-left">
<nav class="hamburger-nav">
<button class="hamburger-button"></button>
</nav>
<div class="title-page">Toolbar</div>
</div>
<div class="main-container-right">
<search-bar>
<input type="text" placeholder="Search" />
<span class="icon"></span><span class="close"></span>
</search-bar>
<div class="bar-options">
<filter-button></filter-button>
<help-button></help-button>
<overflow-menu-list>
<button></button>
<dialog>
<div class="actor-translateY">
<div class="actor-scaleX">
<div class="actor-scaleY">
<ol>
<li>Customize columns</li>
<li>Assign licenses</li>
<li>Download users</li>
</ol>
</div>
</div>
</div>
</dialog>
</overflow-menu-list>
</div>
</div>
</div>
<div class="right-options">
<div class="mobile-options">
<search-bar class="mobile-view mobile-search">
<input type="text" placeholder="Search" />
<span class="icon"></span><span class="close"></span>
</search-bar>
<div class="bar-options">
<filter-button></filter-button>
<help-button></help-button>
<overflow-menu-list>
<button></button>
<dialog>
<ol>
<li>Customize columns</li>
<li>Download users</li>
</ol>
</dialog>
</overflow-menu-list>
</div>
</div>
<div class="more-options">
<apps-grid>
<button></button>
<dialog>
<div class="actor-translateY">
<div class="actor-scaleX">
<div class="actor-scaleY">
<ol>
<li style="width:294px;height:194px;"></li>
</ol>
</div>
</div>
</div>
</dialog>
</apps-grid>
<plus-button></plus-button>
<notification-list>
<button></button>
<counter>
<span></span>
</counter>
<dialog>
<div class="actor-translateY">
<div class="actor-scaleX">
<div class="actor-scaleY">
<ol>
<li style="width:294px;height:194px;"></li>
</ol>
</div>
</div>
</div>
</dialog>
</notification-list>
<avatar-button></avatar-button>
</div>
</div>
</app-bar>
<div class="mask-modal"></div>
<script src="../toolbar/toolbar.js"></script>
</body>
</html>

16
app/styleguide/toolbar/demo.scss
View File

@ -1,16 +0,0 @@
@import "../styleguide_demo_bp";
@import "_toolbar";
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
padding: 0px;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

252
app/styleguide/toolbar/sprite.svg
View File

@ -1,252 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, 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" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<symbol id="New_Symbol_3" viewBox="0 -28 24 24">
<g opacity="0.8">
<g opacity="0">
<path d="M24-26c0-1.1-0.9-2-2-2H2c-1.1,0-2,0.9-2,2v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V-26z"/>
</g>
<path fill="#FFFFFF" d="M11.5-26c1.104,0,2,0.896,2,2h-4C9.5-25.104,10.396-26,11.5-26z"/>
<path fill="#FFFFFF" d="M18.689-21.5C18.271-21.133,18-20.601,18-20v5h-0.025C17.987-14.834,18-14.669,18-14.5
c0,3.072-2.135,5.641-5,6.319V-7.5C13-6.672,12.328-6,11.5-6S10-6.672,10-7.5v-0.681C7.135-8.859,5-11.428,5-14.5
c0-0.169,0.013-0.334,0.025-0.5H5v-5c0-0.601-0.271-1.133-0.689-1.5C3.959-21.808,3.504-22,3-22v-1h2h13h2v1
C19.496-22,19.041-21.808,18.689-21.5z"/>
</g>
</symbol>
<symbol id="ic_x5F_arrowDropDown_x0D_" viewBox="0 -24 24 24">
<g opacity="0.8">
<polygon points="7,-10 12,-15 17,-10 "/>
</g>
<polygon fill="none" points="24,-24 0,-24 0,0 24,0 "/>
</symbol>
<symbol id="ic_x5F_close" viewBox="0 -24 24 24">
<polygon points="19,-6.414 17.586,-5 12,-10.586 6.414,-5 5,-6.414 10.586,-12 5,-17.586 6.414,-19 12,-13.414 17.586,-19
19,-17.586 13.414,-12 "/>
<polygon fill="none" points="24,-24 0,-24 0,0 24,0 "/>
</symbol>
<symbol id="ic_x5F_email" viewBox="0 -24 24 24">
<path d="M20-4H4C2.896-4,2.01-4.896,2.01-6L2-18c0-1.104,0.896-2,2-2h16c1.104,0,2,0.896,2,2v12C22-4.896,21.104-4,20-4z M20-8
l-8-5L4-8v2l8-5l8,5V-8z"/>
<polygon fill="none" points="24,-24 0,-24 0,0 24,0 "/>
</symbol>
<symbol id="ic_x5F_hangout" viewBox="0 -24 24 24">
<g>
<path d="M11.5-2C6.806-2,3-5.806,3-10.5S6.806-19,11.5-19H12v-3.5c4.859,2.344,8,7.5,8,12C20-5.806,16.194-2,11.5-2z M11-11l-1-2
H8.5l1,2H8v3h3V-11z M15-11l-1-2h-1.5l1,2H12v3h3V-11z"/>
<polygon fill="none" points="24,-24 0,-24 0,0 24,0 "/>
</g>
</symbol>
<symbol id="ic_x5F_menu_x0D_" viewBox="0 -24 24 24">
<polygon fill="none" points="24,-24 0,-24 0,0 24,0 "/>
<path opacity="0.8" d="M3-18h18v2H3V-18z M3-13h18v2H3V-13z M3-6v-2h18v2H3z"/>
</symbol>
<symbol id="ic_x5F_moreVert_x5F_dark_x0D_" viewBox="22 -32 4 16">
<path opacity="0.8" fill="#FFFFFF" d="M24-20c1.104,0,2,0.896,2,2s-0.896,2-2,2s-2-0.896-2-2S22.896-20,24-20z M24-22
c-1.104,0-2-0.896-2-2s0.896-2,2-2s2,0.896,2,2S25.104-22,24-22z M24-28c-1.104,0-2-0.896-2-2s0.896-2,2-2s2,0.896,2,2
S25.104-28,24-28z"/>
</symbol>
<symbol id="ic_x5F_remove" viewBox="0 -24 24 24">
<path d="M12-2C6.477-2,2-6.477,2-12s4.477-10,10-10c5.523,0,10,4.477,10,10S17.523-2,12-2z M17-13H7v2h10V-13z"/>
<polygon fill="none" points="24,-24 0,-24 0,0 24,0 "/>
</symbol>
<symbol id="ic_x5F_social_x0D_" viewBox="0 -24 24 24">
<g>
<polygon fill="none" points="24,-24 0,-24 0,0 24,0 "/>
</g>
<path d="M16-11c1.657,0,2.99,1.344,2.99,3S17.657-5,16-5c-1.656,0-3-1.344-3-3S14.344-11,16-11z M8-11c1.657,0,2.99,1.344,2.99,3
S9.657-5,8-5C6.344-5,5-6.344,5-8S6.344-11,8-11z M8-13c-2.334,0-7-1.168-7-3.5V-19h14v2.5C15-14.168,10.334-13,8-13z M16-13
c-0.29,0-0.617-0.018-0.965-0.055C16.193-13.891,17-15.017,17-16.5V-19h6v2.5C23-14.168,18.334-13,16-13z"/>
</symbol>
<symbol id="ic_x5F_toggle_x5F_checkboxOutline_x0D_" viewBox="0 -24 24 24">
<path d="M19-5v-14L5-19.001V-5H19 M19-3H5C3.896-3,3-3.896,3-5v-14c0-1.104,0.896-2,2-2h14c1.104,0,2,0.896,2,2v14
C21-3.896,20.104-3,19-3L19-3z"/>
<g>
<polygon fill="none" points="24,-24 0,-24 0,0 24,0 "/>
</g>
</symbol>
<symbol id="ic_x5F_unfoldLess_x0D_" viewBox="0 -24 24 24">
<g>
<g>
<polygon fill="none" points="0,0 0,-24 24,-24 24,0 "/>
</g>
<path d="M7.414-18.586L8.828-20L12-16.828L15.172-20l1.414,1.414L12-14L7.414-18.586z M16.586-5.414L15.172-4L12-7.172L8.828-4
L7.414-5.414L12-10L16.586-5.414z"/>
</g>
</symbol>
<g opacity="0.8">
<rect x="1" y="49.378" fill="none" width="24" height="24"/>
<g>
<path fill="#FFFFFF" d="M13,51.378c-5.523,0-10,4.477-10,10s4.477,10,10,10s10-4.477,10-10S18.523,51.378,13,51.378z M14,68.378
h-2v-2h2V68.378z M16.066,60.632l-0.895,0.918C14.447,62.273,14,62.878,14,64.378h-2v-0.5c0-1.104,0.447-2.104,1.172-2.828
l1.242-1.258C14.775,59.43,15,58.931,15,58.378c0-1.104-0.896-2-2-2s-2,0.896-2,2H9c0-2.209,1.791-4,4-4s4,1.791,4,4
C17,59.258,16.644,60.055,16.066,60.632z"/>
</g>
</g>
<rect x="1" y="104.299" fill="none" width="24" height="24"/>
<path opacity="0.8" d="M13,112.299c1.104,0,2-0.896,2-2s-0.896-2-2-2s-2,0.896-2,2S11.896,112.299,13,112.299z M13,114.299
c-1.104,0-2,0.896-2,2s0.896,2,2,2s2-0.896,2-2S14.104,114.299,13,114.299z M13,120.299c-1.104,0-2,0.896-2,2s0.896,2,2,2
s2-0.896,2-2S14.104,120.299,13,120.299z"/>
<rect x="4" y="134.299" opacity="0.8" fill="#FFFFFF" width="4" height="4"/>
<rect x="4" y="140.299" opacity="0.8" fill="#FFFFFF" width="4" height="4"/>
<rect x="4" y="146.299" opacity="0.8" fill="#FFFFFF" width="4" height="4"/>
<rect x="10" y="134.299" opacity="0.8" fill="#FFFFFF" width="4" height="4"/>
<rect x="10" y="140.299" opacity="0.8" fill="#FFFFFF" width="4" height="4"/>
<rect x="10" y="146.299" opacity="0.8" fill="#FFFFFF" width="4" height="4"/>
<rect x="16" y="134.299" opacity="0.8" fill="#FFFFFF" width="4" height="4"/>
<rect x="16" y="140.299" opacity="0.8" fill="#FFFFFF" width="4" height="4"/>
<rect x="16" y="146.299" opacity="0.8" fill="#FFFFFF" width="4" height="4"/>
<path opacity="0.8" fill="#FFFFFF" d="M19,170.63h-6v6h-2v-6H5v-2h6v-6h2v6h6V170.63z"/>
<rect y="157.63" opacity="0.6" fill="none" width="24" height="24"/>
<use xlink:href="#New_Symbol_3" width="24" height="24" id="XMLID_74_" y="-28" transform="matrix(1 0 0 -1 0.5 184.6299)" overflow="visible"/>
<g id="ic_x5F_accountCircle_x0D_" opacity="0.2">
<path fill="#455A64" d="M24,455.27c-11.231,0-20.332,9.102-20.332,20.332S12.769,495.934,24,495.934
c11.23,0,20.332-9.102,20.332-20.332S35.23,455.27,24,455.27z M24,461.369c3.367,0,6.1,2.732,6.1,6.1c0,3.371-2.733,6.1-6.1,6.1
c-3.369,0-6.1-2.729-6.1-6.1C17.9,464.102,20.631,461.369,24,461.369z M24,490.241c-5.092,0-9.571-2.602-12.196-6.547
c0.055-4.04,8.141-6.262,12.196-6.262c4.055,0,12.141,2.222,12.194,6.262C33.57,487.64,29.091,490.241,24,490.241z"/>
<rect x="-0.398" y="451.203" fill="none" width="48.797" height="48.797"/>
</g>
<use xlink:href="#ic_x5F_moreVert_x5F_dark_x0D_" width="4" height="16" id="XMLID_3_" x="22" y="-32" transform="matrix(1 0 0 -1 -11.2549 230.7539)" overflow="visible" opacity="0.4"/>
<use xlink:href="#ic_x5F_arrowDropDown_x0D_" width="24" height="24" id="XMLID_77_" y="-24" transform="matrix(1 0 0 -1 1 268.9961)" overflow="visible" opacity="0.6"/>
<use xlink:href="#ic_x5F_close" width="24" height="24" y="-24" transform="matrix(0.8333 0 0 -0.8333 3 298.5566)" overflow="visible" opacity="0.5"/>
<use xlink:href="#ic_x5F_social_x0D_" width="24" height="24" id="XMLID_25_" y="-24" transform="matrix(1 0 0 -1 3 325.2158)" overflow="visible" opacity="0.5"/>
<use xlink:href="#ic_x5F_remove" width="24" height="24" id="XMLID_24_" y="-24" transform="matrix(1 0 0 -1 3 349.2158)" overflow="visible" opacity="0.5"/>
<use xlink:href="#ic_x5F_toggle_x5F_checkboxOutline_x0D_" width="24" height="24" id="XMLID_40_" y="-24" transform="matrix(1.3728 0 0 -1.3728 113.9668 464.0527)" overflow="visible" opacity="0.1"/>
<g>
<g>
<polygon fill="#4E4E4E" points="164.559,482.704 158.264,476.408 156.322,478.35 164.559,486.587 181.033,470.112
179.092,468.172 "/>
</g>
</g>
<use xlink:href="#ic_x5F_unfoldLess_x0D_" width="24" height="24" id="XMLID_241_" y="-24" transform="matrix(1 0 0 -1 0 76.5054)" overflow="visible" opacity="0.5"/>
<use xlink:href="#ic_x5F_hangout" width="24" height="24" id="XMLID_104_" y="-24" transform="matrix(1 0 0 -1 3 376.6299)" overflow="visible" opacity="0.5"/>
<use xlink:href="#ic_x5F_email" width="24" height="24" id="XMLID_62_" x="0" y="-24" transform="matrix(1 0 0 -1 2.6191 402.7803)" overflow="visible" opacity="0.5"/>
<polygon opacity="0.5" fill="#FFFFFF" points="41.173,33.866 40.278,32.973 36.747,36.504 33.216,32.973 32.322,33.866
35.854,37.397 32.322,40.929 33.216,41.823 36.747,38.292 40.278,41.823 41.173,40.929 37.642,37.397 "/>
<use xlink:href="#ic_x5F_menu_x0D_" width="24" height="24" id="XMLID_228_" y="-24" transform="matrix(1 0 0 -1 0 217.999)" overflow="visible" opacity="0.8"/>
<g opacity="0.5">
<g>
<path fill="#FFFFFF" d="M16.502,15h-0.794l-0.275-0.273C16.408,13.59,17,12.115,17,10.5C17,6.91,14.09,4,10.5,4S4,6.91,4,10.5
S6.91,17,10.5,17c1.614,0,3.088-0.592,4.225-1.566l0.276,0.274V16.5L20,21.491L21.49,20L16.502,15z M10.5,15
C8.015,15,6,12.985,6,10.5S8.015,6,10.5,6S15,8.015,15,10.5S12.985,15,10.5,15z"/>
</g>
</g>
<g opacity="0.7">
<g>
<path d="M40.502,15h-0.794l-0.275-0.273C40.408,13.59,41,12.115,41,10.5C41,6.91,38.09,4,34.5,4S28,6.91,28,10.5s2.91,6.5,6.5,6.5
c1.614,0,3.088-0.592,4.225-1.566l0.276,0.274V16.5L44,21.491L45.49,20L40.502,15z M34.5,15c-2.485,0-4.5-2.015-4.5-4.5
S32.015,6,34.5,6S39,8.015,39,10.5S36.985,15,34.5,15z"/>
</g>
</g>
<path opacity="0.8" fill="#FFFFFF" d="M11,43h4v-3h-4V43z M4,30v3h18v-3H4z M7,38h12v-3H7V38z"/>
<g>
<g id="XMLID_84_">
<rect x="18.645" y="396.092" fill="none" width="120" height="144"/>
<g>
<g>
<image overflow="visible" opacity="0.24" width="63" height="63" xlink:href="data:image/png;base64,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
QmCC" transform="matrix(1 0 0 1 47 438)">
</image>
<circle fill="#999999" cx="78.645" cy="468.092" r="28"/>
</g>
<g>
<image overflow="visible" opacity="0.12" width="66" height="66" xlink:href="data:image/png;base64,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" transform="matrix(1 0 0 1 45.5 436.5)">
</image>
<circle fill="#00BFA5" cx="78.645" cy="468.092" r="28"/>
</g>
<g opacity="0.02">
<path fill="#231F20" d="M78.645,440.092c15.464,0,28,12.537,28,28c0,15.465-12.536,28-28,28s-28-12.535-28-28
C50.645,452.629,63.181,440.092,78.645,440.092 M78.645,439.592c-15.715,0-28.5,12.785-28.5,28.5s12.785,28.5,28.5,28.5
s28.5-12.785,28.5-28.5S94.359,439.592,78.645,439.592L78.645,439.592z"/>
</g>
<g opacity="0.04">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="78.6445" y1="496.0918" x2="78.6445" y2="440.0918">
<stop offset="0" style="stop-color:#000000"/>
<stop offset="0.1375" style="stop-color:#000000;stop-opacity:0.8625"/>
<stop offset="1" style="stop-color:#000000;stop-opacity:0"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M78.645,440.592c15.164,0,27.5,12.337,27.5,27.5s-12.336,27.5-27.5,27.5s-27.5-12.337-27.5-27.5
S63.481,440.592,78.645,440.592 M78.645,440.092c-15.464,0-28,12.537-28,28c0,15.465,12.536,28,28,28s28-12.535,28-28
C106.645,452.629,94.108,440.092,78.645,440.092L78.645,440.092z"/>
</g>
<g opacity="0.8">
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="78.6445" y1="496.0918" x2="78.6445" y2="440.0918">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="0.8625" style="stop-color:#FFFFFF;stop-opacity:0.8625"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M78.645,440.592c15.164,0,27.5,12.337,27.5,27.5s-12.336,27.5-27.5,27.5s-27.5-12.337-27.5-27.5
S63.481,440.592,78.645,440.592 M78.645,440.092c-15.464,0-28,12.537-28,28c0,15.465,12.536,28,28,28s28-12.535,28-28
C106.645,452.629,94.108,440.092,78.645,440.092L78.645,440.092z"/>
</g>
</g>
</g>
<g>
<path fill="#FFFFFF" d="M85.645,469.092h-6v6h-2v-6h-6v-2h6v-6h2v6h6V469.092z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

123
app/styleguide/toolbar/toolbar.js
View File

@ -1,123 +0,0 @@
document.addEventListener('DOMContentLoaded', function() {
/*** SEARCH BAR ***/
var mobileSearchBar = document.getElementsByClassName('mobile-search')[0];
var mobileSearchBarClose = mobileSearchBar.querySelector('.close');
mobileSearchBarClose.addEventListener('click', function(e) {
e.stopPropagation();
mobileSearchBar.classList.remove('active-mobile-view');
document.body.classList.remove('active-search');
}, false);
mobileSearchBar.addEventListener('click', function(e) {
e.stopPropagation();
this.classList.add('active-mobile-view');
document.body.classList.add('active-search');
}, false);
/*** END SEARCH BAR ***/
window.addEventListener('resize', function(e) {
mobileSearchBar.classList.remove('active-mobile-view');
document.body.classList.remove('active-search');
});
});
/*TODO - REFACTOR BELOW HERE INTO SEPARATE COMPONENTS*/
document.addEventListener('DOMContentLoaded', function() {
var dialogEls = [];
closeDialogs = function(elException) {
Array.prototype.forEach.call(dialogEls, function(el, i) {
if (!!elException && elException !== el) {
el.classList.remove('open');
el.classList.remove('open-left');
} else if (!!!elException && !!el) {
el.classList.remove('open');
el.classList.remove('open-left');
}
});
}
initializeEls = function(els) {
if (!!els) {
Array.prototype.forEach.call(els, function(el, i) {
var elButton = el.querySelector('button');
var elListDialog = el.querySelector('dialog');
elButton.addEventListener('click', function(e) {
e.stopPropagation();
var valuesDialog = elListDialog.getBoundingClientRect();
var valuesBody = document.body.getBoundingClientRect();
if (valuesDialog.left + valuesDialog.width > valuesBody.width) {
el.classList.remove('open');
el.classList.toggle('open-left');
} else {
el.classList.remove('open-left');
el.classList.toggle('open');
}
closeDialogs(el);
}, false);
dialogEls.push(el);
});
}
}
/*** OVERFLOW MENU LIST ***/
var overflowMenuListArr = document.getElementsByTagName('overflow-menu-list');
initializeEls(overflowMenuListArr);
/*** END OVERFLOW MENU LIST ***/
/*** OVERFLOW MENU ACTION ***/
var overflowMenuAction = document.getElementsByTagName('overflow-menu-action');
initializeEls(overflowMenuAction);
/*** END OVERFLOW MENU ACTION ***/
/*** APPS GRID ***/
var appsGrid = document.getElementsByTagName('apps-grid');
initializeEls(appsGrid);
/*** END APPS GRID ***/
/*** NOTIFICATIONS LIST ***/
var notificationList = document.getElementsByTagName('notification-list');
initializeEls(notificationList);
/*** END NOTIFICATIONS LIST ***/
/*** LEFT NAV ***/
var leftNav = document.getElementsByTagName('left-nav')[0];
var burgerButton = document.getElementsByClassName('hamburger-button')[0];
var maskModal = document.getElementsByTagName('mask-modal')[0];
dialogEls.push(leftNav);
if (!!burgerButton) {
burgerButton.addEventListener('click', function(e) {
e.stopPropagation();
closeDialogs(e.target);
document.body.classList.add('activeLeftNav');
}, false);
}
/*** END LEFT NAV ***/
/*** SEARCH BAR ***/
var searchBars = document.getElementsByTagName('search-bar');
Array.prototype.forEach.call(searchBars, function(el, i) {
el.addEventListener('click', function(e) {
closeDialogs();
document.body.classList.remove('activeLeftNav');
}, false);
});
/*** END SEARCH BAR ***/
/*** DEMO ***/
document.body.addEventListener('click', function(e) {
closeDialogs();
// resetSearchBarValues();
document.body.classList.remove('activeLeftNav');
}, false);
/*** END DEMO ***/
});

4
gulpfile.js
View File

@ -151,8 +151,8 @@ gulp.task('serve', ['styles'], function () {
server: ['.tmp', 'app']
});
gulp.watch(['app/**/*.html'], reload);
gulp.watch(['app/**/*.{scss,css}'], ['styles', reload]);
gulp.watch(['app/**/**/**/*.html'], reload);
gulp.watch(['app/**/**/**/*.{scss,css}'], ['styles', reload]);
gulp.watch(['app/scripts/**/*.js'], ['jshint']);
gulp.watch(['app/images/**/*'], reload);
});