├── 0.100.2 └── 0.100.2.html ├── README.md ├── about.html ├── auto-init.html ├── autocomplete.html ├── badges.html ├── breadcrumbs.html ├── buttons.html ├── cards.html ├── carousel.html ├── checkboxes.html ├── chips.html ├── collapsible.html ├── collections.html ├── color.html ├── css-transitions.html ├── css ├── ghpages-materialize.css └── prism.css ├── dist ├── css │ └── materialize.min.css └── js │ └── materialize.js ├── docs └── js │ ├── init.js │ ├── jquery.timeago.min.js │ ├── lunr.min.js │ ├── prism.js │ └── search.js ├── dropdown.html ├── extras └── noUiSlider │ ├── nouislider.css │ └── nouislider.js ├── fab-toolbar-demo.html ├── feature-discovery.html ├── floating-action-button.html ├── footer.html ├── fullscreen-slider-demo.html ├── getting-started.html ├── getting-started_2.html ├── grid.html ├── helpers.html ├── icons.html ├── images ├── Alan.png ├── alex.png ├── alvin.png ├── bold.png ├── favicon │ ├── apple-touch-icon-152x152.png │ └── favicon-32x32.png ├── kevin.png ├── materialize_team.jpeg ├── menu.gif ├── metaphor.png ├── motion.png ├── office.jpg ├── parallax-template.jpg ├── parallax1.jpg ├── parallax2.jpg ├── sample-1.jpg ├── showcase │ ├── adbeus.png │ ├── closeheat.png │ ├── eadbox.jpg │ ├── joelcox.png │ ├── kioskbrowser.png │ ├── roboterwelt.png │ ├── stephaniejagiello.png │ ├── varun_malhotra.jpg │ ├── visitsarasota.jpg │ └── webonise.png ├── starter-template.gif ├── toast.gif └── yuna.jpg ├── index.html ├── js └── materialize.js ├── materializecss_default.html ├── materializecss_default_2.html ├── media-css.html ├── media.html ├── mobile.html ├── modals.html ├── navbar.html ├── pages ├── admin-dashboard.html ├── demo.htm └── startup-horizontal-half.html ├── pagination.html ├── parallax-demo.html ├── parallax.html ├── pickers.html ├── preloader.html ├── pulse.html ├── pushpin-demo.html ├── pushpin.html ├── radio-buttons.html ├── range.html ├── sass.html ├── scrollspy.html ├── select.html ├── shadow.html ├── showcase.html ├── showcase_2.html ├── sidenav.html ├── support-us.html ├── switches.html ├── table.html ├── tabs.html ├── templates ├── parallax-template.zip ├── parallax-template │ ├── background1.jpg │ ├── background2.jpg │ ├── background3.jpg │ ├── css │ │ └── style.css │ ├── js │ │ └── init.js │ └── preview.html ├── starter-template.zip └── starter-template │ ├── css │ └── style.css │ ├── js │ └── init.js │ └── preview.html ├── text-inputs.html ├── themes.html ├── themes_2.html ├── toasts.html ├── tooltips.html ├── typography.html └── waves.html /0.100.2/0.100.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Documentation - Materialize 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 31 | 32 | 33 | 34 |
35 |
menu
36 | 118 | 119 | 120 |
121 | 133 |
Become a Patron
134 |
135 |
136 |
137 |

Materialize

138 |
139 |

A modern responsive front-end framework based on Material Design

140 |
141 |
142 | Get Started 143 |
144 |
beta release v0.100.2
145 | 146 |
147 | 148 | 149 |
150 |
151 | 152 |
153 |
154 |
155 |
156 | Latest Commit on Github: 157 |    158 | 159 |    160 | 161 | Github 162 |
163 |
164 |
165 |
166 | 167 |
168 |
169 | 170 |
171 |
172 |
173 | 174 |
175 |
176 | 177 |
178 |

Materialize simplifies life for developers and the users they serve.

179 |
180 | 181 | 182 |
183 |
184 |
185 | flash_on 186 |

Speeds up development

187 |

We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.

188 |
189 |
190 | 191 |
192 |
193 | group 194 |

User Experience Focused

195 |

By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.

196 |
197 |
198 | 199 |
200 |
201 | settings 202 |

Easy to work with

203 |

We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.

204 |
205 |
206 |
207 | 208 |
209 |
210 |
211 |
212 |

Showcase

213 |

Checkout what people are creating with Materialize. Get inspired by these beautiful sites and you can even submit your own website to be showcased here.

214 | Explore our Showcase 215 |
216 |
217 |
218 |
219 |
220 |

Themes

221 |
222 |

223 | Take a look at our official themes for Materialize.

224 | 225 |

226 | Explore our Themes 227 |
228 |
229 |
230 |
231 | 232 | 233 |
263 | 264 | 265 | 266 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 291 | 292 | 293 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # materializecss-docs 2 | Offline documentation for materialize css as seen on https://materializecss.com 3 | 4 | -------------------------------------------------------------------------------- /breadcrumbs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Breadcrumbs - Materialize 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 46 |
menu
47 | 143 | 144 | 145 |
146 | 158 |
Become a Patron
159 |
160 |
161 |
162 | 163 |
164 | 165 | 166 |
167 | 168 |
169 |
170 |

Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.

171 |

Basic

172 | 173 | 182 | 183 |

184 | 

185 |   <nav>
186 |     <div class="nav-wrapper">
187 |       <div class="col s12">
188 |         <a href="#!" class="breadcrumb">First</a>
189 |         <a href="#!" class="breadcrumb">Second</a>
190 |         <a href="#!" class="breadcrumb">Third</a>
191 |       </div>
192 |     </div>
193 |   </nav>
194 |
195 |
196 |
197 |
198 |
199 | 200 | 201 | 202 |
203 | 204 |
205 |
206 |
207 | 208 | 209 |
210 |
211 | 214 |
215 |
216 |
217 | 218 |
219 |
220 | 221 | 222 |
350 | 351 | 352 | 353 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 378 | 379 | 380 | -------------------------------------------------------------------------------- /css/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss+bash */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | /* text-shadow: 0 1px white;*/ 12 | font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace; 13 | direction: ltr; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | line-height: 1.4; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 31 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 32 | text-shadow: none; 33 | background: #b3d4fc; 34 | } 35 | 36 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 37 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 38 | text-shadow: none; 39 | background: #b3d4fc; 40 | } 41 | 42 | @media print { 43 | code[class*="language-"], 44 | pre[class*="language-"] { 45 | text-shadow: none; 46 | } 47 | } 48 | 49 | /* Code blocks */ 50 | pre[class*="language-"] { 51 | padding: 1em; 52 | margin: .5em 0; 53 | overflow: auto; 54 | } 55 | 56 | :not(pre) > code[class*="language-"], 57 | pre[class*="language-"] { 58 | background: #f5f2f0; 59 | } 60 | 61 | /* Inline code */ 62 | :not(pre) > code[class*="language-"] { 63 | padding: .1em; 64 | border-radius: .3em; 65 | } 66 | 67 | .token.comment, 68 | .token.prolog, 69 | .token.doctype, 70 | .token.cdata { 71 | color: slategray; 72 | } 73 | 74 | .token.punctuation { 75 | color: #999; 76 | } 77 | 78 | .namespace { 79 | opacity: .7; 80 | } 81 | 82 | .token.property, 83 | .token.tag, 84 | .token.boolean, 85 | .token.number, 86 | .token.constant, 87 | .token.symbol, 88 | .token.deleted { 89 | color: #905; 90 | } 91 | 92 | .token.selector, 93 | .token.attr-name, 94 | .token.string, 95 | .token.char, 96 | .token.builtin, 97 | .token.inserted { 98 | color: #690; 99 | } 100 | 101 | .token.operator, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .style .token.string { 106 | color: #a67f59; 107 | background: hsla(0, 0%, 100%, .5); 108 | } 109 | 110 | .token.atrule, 111 | .token.attr-value, 112 | .token.keyword { 113 | color: #07a; 114 | } 115 | 116 | .token.function { 117 | color: #DD4A68; 118 | } 119 | 120 | .token.regex, 121 | .token.important, 122 | .token.variable { 123 | color: #e90; 124 | } 125 | 126 | .token.important { 127 | font-weight: bold; 128 | } 129 | 130 | .token.entity { 131 | cursor: help; 132 | } 133 | 134 | -------------------------------------------------------------------------------- /docs/js/init.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $(function() { 3 | var window_width = $(window).width(); 4 | 5 | // convert rgb to hex value string 6 | function rgb2hex(rgb) { 7 | if (/^#[0-9A-F]{6}$/i.test(rgb)) { 8 | return rgb; 9 | } 10 | 11 | rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 12 | 13 | if (rgb === null) { 14 | return 'N/A'; 15 | } 16 | 17 | function hex(x) { 18 | return ('0' + parseInt(x).toString(16)).slice(-2); 19 | } 20 | 21 | return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 22 | } 23 | 24 | $('.dynamic-color .col').each(function() { 25 | $(this) 26 | .children() 27 | .each(function() { 28 | var color = $(this).css('background-color'), 29 | classes = $(this).attr('class'); 30 | $(this).html('' + rgb2hex(color) + ' ' + classes + ''); 31 | if (classes.indexOf('darken') >= 0 || $(this).hasClass('black')) { 32 | $(this).css('color', 'rgba(255,255,255,.9'); 33 | } 34 | }); 35 | }); 36 | 37 | // Floating-Fixed table of contents 38 | setTimeout(function() { 39 | var tocWrapperHeight = 260; // Max height of ads. 40 | var tocHeight = $('.toc-wrapper .table-of-contents').length 41 | ? $('.toc-wrapper .table-of-contents').height() 42 | : 0; 43 | var socialHeight = 95; // Height of unloaded social media in footer. 44 | var footerOffset = $('body > footer').first().length 45 | ? $('body > footer') 46 | .first() 47 | .offset().top 48 | : 0; 49 | var bottomOffset = footerOffset - socialHeight - tocHeight - tocWrapperHeight; 50 | 51 | if ($('nav').length) { 52 | console.log('Nav pushpin', $('nav').height()); 53 | $('.toc-wrapper').pushpin({ 54 | top: $('nav').height(), 55 | bottom: bottomOffset 56 | }); 57 | } else if ($('#index-banner').length) { 58 | $('.toc-wrapper').pushpin({ 59 | top: $('#index-banner').height(), 60 | bottom: bottomOffset 61 | }); 62 | } else { 63 | $('.toc-wrapper').pushpin({ 64 | top: 0, 65 | bottom: bottomOffset 66 | }); 67 | } 68 | }, 100); 69 | 70 | // BuySellAds Detection 71 | var $bsa = $('.buysellads'), 72 | $timesToCheck = 3; 73 | function checkForChanges() { 74 | if (!$bsa.find('#carbonads').length) { 75 | $timesToCheck -= 1; 76 | if ($timesToCheck >= 0) { 77 | setTimeout(checkForChanges, 500); 78 | } else { 79 | var donateAd = $( 80 | '
Help support us by turning off adblock. If you still prefer to keep adblock on for this page but still want to support us, feel free to donate. Any little bit helps.
' 81 | ); 82 | 83 | $bsa.append(donateAd); 84 | } 85 | } 86 | } 87 | checkForChanges(); 88 | 89 | // BuySellAds Demos close button. 90 | $('.buysellads.buysellads-demo .close').on('click', function() { 91 | $(this) 92 | .parent() 93 | .remove(); 94 | }); 95 | 96 | // Github Latest Commit 97 | if ($('.github-commit').length) { 98 | // Checks if widget div exists (Index only) 99 | $.ajax({ 100 | url: 'https://api.github.com/repos/dogfalo/materialize/commits/v1-dev', 101 | dataType: 'json', 102 | success: function(data) { 103 | var sha = data.sha, 104 | date = jQuery.timeago(data.commit.author.date); 105 | if (window_width < 1120) { 106 | sha = sha.substring(0, 7); 107 | } 108 | $('.github-commit') 109 | .find('.date') 110 | .html(date); 111 | $('.github-commit') 112 | .find('.sha') 113 | .html(sha) 114 | .attr('href', data.html_url); 115 | } 116 | }); 117 | } 118 | 119 | // Toggle Flow Text 120 | var toggleFlowTextButton = $('#flow-toggle'); 121 | toggleFlowTextButton.click(function() { 122 | $('#flow-text-demo') 123 | .children('p') 124 | .each(function() { 125 | $(this).toggleClass('flow-text'); 126 | }); 127 | }); 128 | 129 | // Toggle Containers on page 130 | var toggleContainersButton = $('#container-toggle-button'); 131 | toggleContainersButton.click(function() { 132 | $('body .browser-window .container, .had-container').each(function() { 133 | $(this).toggleClass('had-container'); 134 | $(this).toggleClass('container'); 135 | if ($(this).hasClass('container')) { 136 | toggleContainersButton.text('Turn off Containers'); 137 | } else { 138 | toggleContainersButton.text('Turn on Containers'); 139 | } 140 | }); 141 | }); 142 | 143 | // Detect touch screen and enable scrollbar if necessary 144 | function is_touch_device() { 145 | try { 146 | document.createEvent('TouchEvent'); 147 | return true; 148 | } catch (e) { 149 | return false; 150 | } 151 | } 152 | if (is_touch_device()) { 153 | $('#nav-mobile').css({ overflow: 'auto' }); 154 | } 155 | 156 | // Set checkbox on forms.html to indeterminate 157 | var indeterminateCheckbox = document.getElementById('indeterminate-checkbox'); 158 | if (indeterminateCheckbox !== null) indeterminateCheckbox.indeterminate = true; 159 | 160 | // Pushpin Demo Init 161 | if ($('.pushpin-demo-nav').length) { 162 | $('.pushpin-demo-nav').each(function() { 163 | var $this = $(this); 164 | var $target = $('#' + $(this).attr('data-target')); 165 | $this.pushpin({ 166 | top: $target.offset().top, 167 | bottom: $target.offset().top + $target.outerHeight() - $this.height() 168 | }); 169 | }); 170 | } 171 | 172 | // CSS Transitions Demo Init 173 | if ($('#scale-demo').length && $('#scale-demo-trigger').length) { 174 | $('#scale-demo-trigger').click(function() { 175 | $('#scale-demo').toggleClass('scale-out'); 176 | }); 177 | } 178 | 179 | // Plugin initialization 180 | $('.carousel').carousel(); 181 | $('.carousel.carousel-slider').carousel({ 182 | fullWidth: true, 183 | indicators: true, 184 | onCycleTo: function(item, dragged) {} 185 | }); 186 | $('.collapsible').collapsible(); 187 | $('.collapsible.expandable').collapsible({ 188 | accordion: false 189 | }); 190 | 191 | $('.dropdown-trigger').dropdown(); 192 | $('.slider').slider(); 193 | $('.parallax').parallax(); 194 | $('.materialboxed').materialbox(); 195 | $('.modal').modal(); 196 | $('.scrollspy').scrollSpy(); 197 | $('.datepicker').datepicker(); 198 | $('.tabs').tabs(); 199 | $('.timepicker').timepicker(); 200 | $('.tooltipped').tooltip(); 201 | $('select') 202 | .not('.disabled') 203 | .formSelect(); 204 | $('.sidenav').sidenav(); 205 | $('.tap-target').tapTarget(); 206 | $('input.autocomplete').autocomplete({ 207 | data: { Apple: null, Microsoft: null, Google: 'http://placehold.it/250x250' } 208 | }); 209 | $('input[data-length], textarea[data-length]').characterCounter(); 210 | 211 | // Swipeable Tabs Demo Init 212 | if ($('#tabs-swipe-demo').length) { 213 | $('#tabs-swipe-demo').tabs({ swipeable: true }); 214 | } 215 | 216 | // Chips 217 | $('.chips').chips(); 218 | $('.chips-initial').chips({ 219 | readOnly: true, 220 | data: [ 221 | { 222 | tag: 'Apple' 223 | }, 224 | { 225 | tag: 'Microsoft' 226 | }, 227 | { 228 | tag: 'Google' 229 | } 230 | ] 231 | }); 232 | $('.chips-placeholder').chips({ 233 | placeholder: 'Enter a tag', 234 | secondaryPlaceholder: '+Tag' 235 | }); 236 | $('.chips-autocomplete').chips({ 237 | autocompleteOptions: { 238 | data: { 239 | Apple: null, 240 | Microsoft: null, 241 | Google: null 242 | } 243 | } 244 | }); 245 | 246 | // Fab 247 | $('.fixed-action-btn').floatingActionButton(); 248 | $('.fixed-action-btn.horizontal').floatingActionButton({ 249 | direction: 'left' 250 | }); 251 | $('.fixed-action-btn.click-to-toggle').floatingActionButton({ 252 | direction: 'left', 253 | hoverEnabled: false 254 | }); 255 | $('.fixed-action-btn.toolbar').floatingActionButton({ 256 | toolbarEnabled: true 257 | }); 258 | }); // end of document ready 259 | })(jQuery); // end of jQuery name space 260 | -------------------------------------------------------------------------------- /docs/js/jquery.timeago.min.js: -------------------------------------------------------------------------------- 1 | !function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(t){function e(){var e=a(this),o=r.settings;return isNaN(e.datetime)||(0==o.cutoff||Math.abs(n(e.datetime))0)||r.isTime(e)&&e.attr("title")||e.attr("title",a)}return e.data("timeago")}function i(t){return r.inWords(n(t))}function n(t){return(new Date).getTime()-t.getTime()}t.timeago=function(e){return i(e instanceof Date?e:"string"==typeof e?t.timeago.parse(e):"number"==typeof e?new Date(e):t.timeago.datetime(e))};var r=t.timeago;t.extend(t.timeago,{settings:{refreshMillis:6e4,allowPast:!0,allowFuture:!1,localeTitle:!1,cutoff:0,strings:{prefixAgo:null,prefixFromNow:null,suffixAgo:"ago",suffixFromNow:"from now",inPast:"any moment now",seconds:"less than a minute",minute:"about a minute",minutes:"%d minutes",hour:"about an hour",hours:"about %d hours",day:"a day",days:"%d days",month:"about a month",months:"%d months",year:"about a year",years:"%d years",wordSeparator:" ",numbers:[]}},inWords:function(e){function a(a,n){var r=t.isFunction(a)?a(n,e):a,o=i.numbers&&i.numbers[n]||n;return r.replace(/%d/i,o)}if(!this.settings.allowPast&&!this.settings.allowFuture)throw"timeago allowPast and allowFuture settings can not both be set to false.";var i=this.settings.strings,n=i.prefixAgo,r=i.suffixAgo;if(this.settings.allowFuture&&0>e&&(n=i.prefixFromNow,r=i.suffixFromNow),!this.settings.allowPast&&e>=0)return this.settings.strings.inPast;var o=Math.abs(e)/1e3,s=o/60,u=s/60,m=u/24,l=m/365,d=45>o&&a(i.seconds,Math.round(o))||90>o&&a(i.minute,1)||45>s&&a(i.minutes,Math.round(s))||90>s&&a(i.hour,1)||24>u&&a(i.hours,Math.round(u))||42>u&&a(i.day,1)||30>m&&a(i.days,Math.round(m))||45>m&&a(i.month,1)||365>m&&a(i.months,Math.round(m/30))||1.5>l&&a(i.year,1)||a(i.years,Math.round(l)),f=i.wordSeparator||"";return void 0===i.wordSeparator&&(f=" "),t.trim([n,d,r].join(f))},parse:function(e){var a=t.trim(e);return a=a.replace(/\.\d+/,""),a=a.replace(/-/,"/").replace(/-/,"/"),a=a.replace(/T/," ").replace(/Z/," UTC"),a=a.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"),a=a.replace(/([\+\-]\d\d)$/," $100"),new Date(a)},datetime:function(e){var a=t(e).attr(r.isTime(e)?"datetime":"title");return r.parse(a)},isTime:function(e){return"time"===t(e).get(0).tagName.toLowerCase()}});var o={init:function(){var a=t.proxy(e,this);a();var i=r.settings;i.refreshMillis>0&&(this._timeagoInterval=setInterval(a,i.refreshMillis))},update:function(a){var i=r.parse(a);t(this).data("timeago",{datetime:i}),r.settings.localeTitle&&t(this).attr("title",i.toLocaleString()),e.apply(this)},updateFromDOM:function(){t(this).data("timeago",{datetime:r.parse(t(this).attr(r.isTime(this)?"datetime":"title"))}),e.apply(this)},dispose:function(){this._timeagoInterval&&(window.clearInterval(this._timeagoInterval),this._timeagoInterval=null)}};t.fn.timeago=function(t,e){var a=t?o[t]:o.init;if(!a)throw new Error("Unknown function name '"+t+"' for timeago");return this.each(function(){a.call(this,e)}),this},document.createElement("abbr"),document.createElement("time")}); -------------------------------------------------------------------------------- /docs/js/lunr.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 0.5.12 3 | * Copyright (C) 2015 Oliver Nightingale 4 | * MIT Licensed 5 | * @license 6 | */ 7 | !function(){var t=function(e){var n=new t.Index;return n.pipeline.add(t.trimmer,t.stopWordFilter,t.stemmer),e&&e.call(n,n),n};t.version="0.5.12",t.utils={},t.utils.warn=function(t){return function(e){t.console&&console.warn&&console.warn(e)}}(this),t.EventEmitter=function(){this.events={}},t.EventEmitter.prototype.addListener=function(){var t=Array.prototype.slice.call(arguments),e=t.pop(),n=t;if("function"!=typeof e)throw new TypeError("last argument must be a function");n.forEach(function(t){this.hasHandler(t)||(this.events[t]=[]),this.events[t].push(e)},this)},t.EventEmitter.prototype.removeListener=function(t,e){if(this.hasHandler(t)){var n=this.events[t].indexOf(e);this.events[t].splice(n,1),this.events[t].length||delete this.events[t]}},t.EventEmitter.prototype.emit=function(t){if(this.hasHandler(t)){var e=Array.prototype.slice.call(arguments,1);this.events[t].forEach(function(t){t.apply(void 0,e)})}},t.EventEmitter.prototype.hasHandler=function(t){return t in this.events},t.tokenizer=function(t){return arguments.length&&null!=t&&void 0!=t?Array.isArray(t)?t.map(function(t){return t.toLowerCase()}):t.toString().trim().toLowerCase().split(/[\s\-]+/):[]},t.Pipeline=function(){this._stack=[]},t.Pipeline.registeredFunctions={},t.Pipeline.registerFunction=function(e,n){n in this.registeredFunctions&&t.utils.warn("Overwriting existing registered function: "+n),e.label=n,t.Pipeline.registeredFunctions[e.label]=e},t.Pipeline.warnIfFunctionNotRegistered=function(e){var n=e.label&&e.label in this.registeredFunctions;n||t.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},t.Pipeline.load=function(e){var n=new t.Pipeline;return e.forEach(function(e){var i=t.Pipeline.registeredFunctions[e];if(!i)throw new Error("Cannot load un-registered function: "+e);n.add(i)}),n},t.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach(function(e){t.Pipeline.warnIfFunctionNotRegistered(e),this._stack.push(e)},this)},t.Pipeline.prototype.after=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._stack.indexOf(e);if(-1==i)throw new Error("Cannot find existingFn");i+=1,this._stack.splice(i,0,n)},t.Pipeline.prototype.before=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._stack.indexOf(e);if(-1==i)throw new Error("Cannot find existingFn");this._stack.splice(i,0,n)},t.Pipeline.prototype.remove=function(t){var e=this._stack.indexOf(t);-1!=e&&this._stack.splice(e,1)},t.Pipeline.prototype.run=function(t){for(var e=[],n=t.length,i=this._stack.length,o=0;n>o;o++){for(var r=t[o],s=0;i>s&&(r=this._stack[s](r,o,t),void 0!==r);s++);void 0!==r&&e.push(r)}return e},t.Pipeline.prototype.reset=function(){this._stack=[]},t.Pipeline.prototype.toJSON=function(){return this._stack.map(function(e){return t.Pipeline.warnIfFunctionNotRegistered(e),e.label})},t.Vector=function(){this._magnitude=null,this.list=void 0,this.length=0},t.Vector.Node=function(t,e,n){this.idx=t,this.val=e,this.next=n},t.Vector.prototype.insert=function(e,n){this._magnitude=void 0;var i=this.list;if(!i)return this.list=new t.Vector.Node(e,n,i),this.length++;if(en.idx?n=n.next:(i+=e.val*n.val,e=e.next,n=n.next);return i},t.Vector.prototype.similarity=function(t){return this.dot(t)/(this.magnitude()*t.magnitude())},t.SortedSet=function(){this.length=0,this.elements=[]},t.SortedSet.load=function(t){var e=new this;return e.elements=t,e.length=t.length,e},t.SortedSet.prototype.add=function(){var t,e;for(t=0;t1;){if(r===t)return o;t>r&&(e=o),r>t&&(n=o),i=n-e,o=e+Math.floor(i/2),r=this.elements[o]}return r===t?o:-1},t.SortedSet.prototype.locationFor=function(t){for(var e=0,n=this.elements.length,i=n-e,o=e+Math.floor(i/2),r=this.elements[o];i>1;)t>r&&(e=o),r>t&&(n=o),i=n-e,o=e+Math.floor(i/2),r=this.elements[o];return r>t?o:t>r?o+1:void 0},t.SortedSet.prototype.intersect=function(e){for(var n=new t.SortedSet,i=0,o=0,r=this.length,s=e.length,a=this.elements,h=e.elements;;){if(i>r-1||o>s-1)break;a[i]!==h[o]?a[i]h[o]&&o++:(n.add(a[i]),i++,o++)}return n},t.SortedSet.prototype.clone=function(){var e=new t.SortedSet;return e.elements=this.toArray(),e.length=e.elements.length,e},t.SortedSet.prototype.union=function(t){var e,n,i;return this.length>=t.length?(e=this,n=t):(e=t,n=this),i=e.clone(),i.add.apply(i,n.toArray()),i},t.SortedSet.prototype.toJSON=function(){return this.toArray()},t.Index=function(){this._fields=[],this._ref="id",this.pipeline=new t.Pipeline,this.documentStore=new t.Store,this.tokenStore=new t.TokenStore,this.corpusTokens=new t.SortedSet,this.eventEmitter=new t.EventEmitter,this._idfCache={},this.on("add","remove","update",function(){this._idfCache={}}.bind(this))},t.Index.prototype.on=function(){var t=Array.prototype.slice.call(arguments);return this.eventEmitter.addListener.apply(this.eventEmitter,t)},t.Index.prototype.off=function(t,e){return this.eventEmitter.removeListener(t,e)},t.Index.load=function(e){e.version!==t.version&&t.utils.warn("version mismatch: current "+t.version+" importing "+e.version);var n=new this;return n._fields=e.fields,n._ref=e.ref,n.documentStore=t.Store.load(e.documentStore),n.tokenStore=t.TokenStore.load(e.tokenStore),n.corpusTokens=t.SortedSet.load(e.corpusTokens),n.pipeline=t.Pipeline.load(e.pipeline),n},t.Index.prototype.field=function(t,e){var e=e||{},n={name:t,boost:e.boost||1};return this._fields.push(n),this},t.Index.prototype.ref=function(t){return this._ref=t,this},t.Index.prototype.add=function(e,n){var i={},o=new t.SortedSet,r=e[this._ref],n=void 0===n?!0:n;this._fields.forEach(function(n){var r=this.pipeline.run(t.tokenizer(e[n.name]));i[n.name]=r,t.SortedSet.prototype.add.apply(o,r)},this),this.documentStore.set(r,o),t.SortedSet.prototype.add.apply(this.corpusTokens,o.toArray());for(var s=0;s0&&(i=1+Math.log(this.documentStore.length/n)),this._idfCache[e]=i},t.Index.prototype.search=function(e){var n=this.pipeline.run(t.tokenizer(e)),i=new t.Vector,o=[],r=this._fields.reduce(function(t,e){return t+e.boost},0),s=n.some(function(t){return this.tokenStore.has(t)},this);if(!s)return[];n.forEach(function(e,n,s){var a=1/s.length*this._fields.length*r,h=this,l=this.tokenStore.expand(e).reduce(function(n,o){var r=h.corpusTokens.indexOf(o),s=h.idf(o),l=1,u=new t.SortedSet;if(o!==e){var c=Math.max(3,o.length-e.length);l=1/Math.log(c)}return r>-1&&i.insert(r,a*s*l),Object.keys(h.tokenStore.get(o)).forEach(function(t){u.add(t)}),n.union(u)},new t.SortedSet);o.push(l)},this);var a=o.reduce(function(t,e){return t.intersect(e)});return a.map(function(t){return{ref:t,score:i.similarity(this.documentVector(t))}},this).sort(function(t,e){return e.score-t.score})},t.Index.prototype.documentVector=function(e){for(var n=this.documentStore.get(e),i=n.length,o=new t.Vector,r=0;i>r;r++){var s=n.elements[r],a=this.tokenStore.get(s)[e].tf,h=this.idf(s);o.insert(this.corpusTokens.indexOf(s),a*h)}return o},t.Index.prototype.toJSON=function(){return{version:t.version,fields:this._fields,ref:this._ref,documentStore:this.documentStore.toJSON(),tokenStore:this.tokenStore.toJSON(),corpusTokens:this.corpusTokens.toJSON(),pipeline:this.pipeline.toJSON()}},t.Index.prototype.use=function(t){var e=Array.prototype.slice.call(arguments,1);e.unshift(this),t.apply(this,e)},t.Store=function(){this.store={},this.length=0},t.Store.load=function(e){var n=new this;return n.length=e.length,n.store=Object.keys(e.store).reduce(function(n,i){return n[i]=t.SortedSet.load(e.store[i]),n},{}),n},t.Store.prototype.set=function(t,e){this.has(t)||this.length++,this.store[t]=e},t.Store.prototype.get=function(t){return this.store[t]},t.Store.prototype.has=function(t){return t in this.store},t.Store.prototype.remove=function(t){this.has(t)&&(delete this.store[t],this.length--)},t.Store.prototype.toJSON=function(){return{store:this.store,length:this.length}},t.stemmer=function(){var t={ational:"ate",tional:"tion",enci:"ence",anci:"ance",izer:"ize",bli:"ble",alli:"al",entli:"ent",eli:"e",ousli:"ous",ization:"ize",ation:"ate",ator:"ate",alism:"al",iveness:"ive",fulness:"ful",ousness:"ous",aliti:"al",iviti:"ive",biliti:"ble",logi:"log"},e={icate:"ic",ative:"",alize:"al",iciti:"ic",ical:"ic",ful:"",ness:""},n="[^aeiou]",i="[aeiouy]",o=n+"[^aeiouy]*",r=i+"[aeiou]*",s="^("+o+")?"+r+o,a="^("+o+")?"+r+o+"("+r+")?$",h="^("+o+")?"+r+o+r+o,l="^("+o+")?"+i,u=new RegExp(s),c=new RegExp(h),f=new RegExp(a),d=new RegExp(l),p=/^(.+?)(ss|i)es$/,m=/^(.+?)([^s])s$/,v=/^(.+?)eed$/,y=/^(.+?)(ed|ing)$/,g=/.$/,S=/(at|bl|iz)$/,w=new RegExp("([^aeiouylsz])\\1$"),x=new RegExp("^"+o+i+"[^aeiouwxy]$"),k=/^(.+?[^aeiou])y$/,b=/^(.+?)(ational|tional|enci|anci|izer|bli|alli|entli|eli|ousli|ization|ation|ator|alism|iveness|fulness|ousness|aliti|iviti|biliti|logi)$/,E=/^(.+?)(icate|ative|alize|iciti|ical|ful|ness)$/,_=/^(.+?)(al|ance|ence|er|ic|able|ible|ant|ement|ment|ent|ou|ism|ate|iti|ous|ive|ize)$/,F=/^(.+?)(s|t)(ion)$/,O=/^(.+?)e$/,P=/ll$/,N=new RegExp("^"+o+i+"[^aeiouwxy]$"),T=function(n){var i,o,r,s,a,h,l;if(n.length<3)return n;if(r=n.substr(0,1),"y"==r&&(n=r.toUpperCase()+n.substr(1)),s=p,a=m,s.test(n)?n=n.replace(s,"$1$2"):a.test(n)&&(n=n.replace(a,"$1$2")),s=v,a=y,s.test(n)){var T=s.exec(n);s=u,s.test(T[1])&&(s=g,n=n.replace(s,""))}else if(a.test(n)){var T=a.exec(n);i=T[1],a=d,a.test(i)&&(n=i,a=S,h=w,l=x,a.test(n)?n+="e":h.test(n)?(s=g,n=n.replace(s,"")):l.test(n)&&(n+="e"))}if(s=k,s.test(n)){var T=s.exec(n);i=T[1],n=i+"i"}if(s=b,s.test(n)){var T=s.exec(n);i=T[1],o=T[2],s=u,s.test(i)&&(n=i+t[o])}if(s=E,s.test(n)){var T=s.exec(n);i=T[1],o=T[2],s=u,s.test(i)&&(n=i+e[o])}if(s=_,a=F,s.test(n)){var T=s.exec(n);i=T[1],s=c,s.test(i)&&(n=i)}else if(a.test(n)){var T=a.exec(n);i=T[1]+T[2],a=c,a.test(i)&&(n=i)}if(s=O,s.test(n)){var T=s.exec(n);i=T[1],s=c,a=f,h=N,(s.test(i)||a.test(i)&&!h.test(i))&&(n=i)}return s=P,a=c,s.test(n)&&a.test(n)&&(s=g,n=n.replace(s,"")),"y"==r&&(n=r.toLowerCase()+n.substr(1)),n};return T}(),t.Pipeline.registerFunction(t.stemmer,"stemmer"),t.stopWordFilter=function(e){return e&&t.stopWordFilter.stopWords[e]!==e?e:void 0},t.stopWordFilter.stopWords={a:"a",able:"able",about:"about",across:"across",after:"after",all:"all",almost:"almost",also:"also",am:"am",among:"among",an:"an",and:"and",any:"any",are:"are",as:"as",at:"at",be:"be",because:"because",been:"been",but:"but",by:"by",can:"can",cannot:"cannot",could:"could",dear:"dear",did:"did","do":"do",does:"does",either:"either","else":"else",ever:"ever",every:"every","for":"for",from:"from",get:"get",got:"got",had:"had",has:"has",have:"have",he:"he",her:"her",hers:"hers",him:"him",his:"his",how:"how",however:"however",i:"i","if":"if","in":"in",into:"into",is:"is",it:"it",its:"its",just:"just",least:"least",let:"let",like:"like",likely:"likely",may:"may",me:"me",might:"might",most:"most",must:"must",my:"my",neither:"neither",no:"no",nor:"nor",not:"not",of:"of",off:"off",often:"often",on:"on",only:"only",or:"or",other:"other",our:"our",own:"own",rather:"rather",said:"said",say:"say",says:"says",she:"she",should:"should",since:"since",so:"so",some:"some",than:"than",that:"that",the:"the",their:"their",them:"them",then:"then",there:"there",these:"these",they:"they","this":"this",tis:"tis",to:"to",too:"too",twas:"twas",us:"us",wants:"wants",was:"was",we:"we",were:"were",what:"what",when:"when",where:"where",which:"which","while":"while",who:"who",whom:"whom",why:"why",will:"will","with":"with",would:"would",yet:"yet",you:"you",your:"your"},t.Pipeline.registerFunction(t.stopWordFilter,"stopWordFilter"),t.trimmer=function(t){var e=t.replace(/^\W+/,"").replace(/\W+$/,"");return""===e?void 0:e},t.Pipeline.registerFunction(t.trimmer,"trimmer"),t.TokenStore=function(){this.root={docs:{}},this.length=0},t.TokenStore.load=function(t){var e=new this;return e.root=t.root,e.length=t.length,e},t.TokenStore.prototype.add=function(t,e,n){var n=n||this.root,i=t[0],o=t.slice(1);return i in n||(n[i]={docs:{}}),0===o.length?(n[i].docs[e.ref]=e,void(this.length+=1)):this.add(o,e,n[i])},t.TokenStore.prototype.has=function(t){if(!t)return!1;for(var e=this.root,n=0;ne.length)break e;if(!(d instanceof a)){g.lastIndex=0;var m=g.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),O=[p,1];b&&O.push(b);var N=new a(l,u?t.tokenize(m,u):m,h);O.push(N),w&&O.push(w),Array.prototype.splice.apply(r,O)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var s="";for(var o in i.attributes)s+=o+'="'+(i.attributes[o]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+s+">"+i.content+""},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi},Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/|<\/style>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css},alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').+?\1/gi,inside:{"attr-name":{pattern:/^\s*style/gi,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/gi,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));; 5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|-?Infinity)\b/g,"function":/(?!\d)[a-z0-9_$]+(?=\()/gi}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}});; 7 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm}),Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i}),Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i}),Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});; 8 | Prism.languages.bash=Prism.languages.extend("clike",{comment:{pattern:/(^|[^"{\\])(#.*?(\r?\n|$))/g,lookbehind:!0},string:{pattern:/("|')(\\?[\s\S])*?\1/g,inside:{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^\}]+\})/g}},keyword:/\b(if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)\b/g}),Prism.languages.insertBefore("bash","keyword",{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^}]+\})/g}),Prism.languages.insertBefore("bash","comment",{important:/(^#!\s*\/bin\/bash)|(^#!\s*\/bin\/sh)/g});; 9 | -------------------------------------------------------------------------------- /docs/js/search.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | $(document).ready(function() { 3 | window.index = lunr(function () { 4 | this.field('title', {boost: 10}); 5 | this.field('body'); 6 | this.ref('href'); 7 | }); 8 | window.index.pipeline.reset(); 9 | 10 | window.index.add({ 11 | href: 'http://materializecss.com/about.html', 12 | title: 'About', 13 | body: 'Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google"s goal is to develop a system of design that allows for a unified user experience across all their products on any platform.' 14 | }); 15 | 16 | window.index.add({ 17 | href: 'http://materializecss.com/autocomplete.html', 18 | title: 'Autocomplete', 19 | body: 'Add an autocomplete dropdown below your input to suggest possible values in your form. You can populate the list of autocomplete options dynamically as well.' 20 | }); 21 | 22 | window.index.add({ 23 | href: 'http://materializecss.com/badges.html', 24 | title: 'Badges', 25 | body: 'Badges can notify you that there are new or unread messages or notifications.' 26 | }); 27 | 28 | window.index.add({ 29 | href: 'http://materializecss.com/buttons.html', 30 | title: 'Buttons', 31 | body: 'There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.' 32 | }); 33 | 34 | window.index.add({ 35 | href: 'http://materializecss.com/breadcrumbs.html', 36 | title: 'Breadcrumbs', 37 | body: 'There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.' 38 | }); 39 | 40 | window.index.add({ 41 | href: 'http://materializecss.com/cards.html', 42 | title: 'Cards', 43 | body: 'Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.' 44 | }); 45 | 46 | window.index.add({ 47 | href: 'http://materializecss.com/carousel.html', 48 | title: 'Carousel', 49 | body: 'Our Carousel is a robust and versatile component that can be an image slider, to an item carousel, to an onboarding experience.' 50 | }); 51 | 52 | window.index.add({ 53 | href: 'http://materializecss.com/checkboxes.html', 54 | title: 'Checkboxes', 55 | body: 'Use checkboxes when looking for yes or no answers. The for attribute is necessary to bind our custom checkbox with the input. Add the input\'s id as the value of the for attribute of the label.' 56 | }); 57 | 58 | window.index.add({ 59 | href: 'http://materializecss.com/chips.html', 60 | title: 'Chips', 61 | body: 'Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.' 62 | }); 63 | 64 | window.index.add({ 65 | href: 'http://materializecss.com/collapsible.html', 66 | title: 'Collapsible', 67 | body: 'Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.' 68 | }); 69 | 70 | window.index.add({ 71 | href: 'http://materializecss.com/collections.html', 72 | title: 'Collections', 73 | body: 'Collections allow you to group list objects together.' 74 | }); 75 | 76 | window.index.add({ 77 | href: 'http://materializecss.com/color.html', 78 | title: 'Color', 79 | body: 'Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.' 80 | }); 81 | 82 | window.index.add({ 83 | href: 'http://materializecss.com/dropdown.html', 84 | title: 'dropdown', 85 | body: 'Add a dropdown list to any button.' 86 | }); 87 | 88 | window.index.add({ 89 | href: 'http://materializecss.com/feature-discovery.html', 90 | title: 'feature discovery', 91 | body: 'Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.' 92 | }); 93 | 94 | window.index.add({ 95 | href: 'http://materializecss.com/footer.html', 96 | title: 'footer', 97 | body: 'Footers are a great way to organize a lot of site navigation and information at the end of a page. This is where the user will look once hes finished scrolling through the current page or is looking for additional information about your website.' 98 | }); 99 | 100 | window.index.add({ 101 | href: 'http://materializecss.com/fullscreen-slider-demo.html', 102 | title: 'Fullscreen slider demo', 103 | body: 'Fullscreen slider demo' 104 | }); 105 | 106 | window.index.add({ 107 | href: 'http://materializecss.com/getting-started.html', 108 | title: 'Getting Started', 109 | body: 'Learn how to easily start using Materialize in your website.' 110 | }); 111 | 112 | window.index.add({ 113 | href: 'http://materializecss.com/grid.html', 114 | title: 'Grid', 115 | body: 'We are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.' 116 | }); 117 | 118 | window.index.add({ 119 | href: 'http://materializecss.com/helpers.html', 120 | title: 'Helpers', 121 | body: 'helper classes' 122 | }); 123 | 124 | window.index.add({ 125 | href: 'http://materializecss.com/icons.html', 126 | title: 'icons', 127 | body: 'We have included 740 Material Design Icons courtesy of Google' 128 | }); 129 | 130 | window.index.add({ 131 | href: 'http://materializecss.com/media-css.html', 132 | title: 'Media CSS', 133 | body: 'Media CSS classes' 134 | }); 135 | 136 | window.index.add({ 137 | href: 'http://materializecss.com/media.html', 138 | title: 'Media JavaScript slider materialbox', 139 | body: 'Media components include things that have to do with large media objects like Images, Video, Audio, etc.' 140 | }); 141 | 142 | window.index.add({ 143 | href: 'http://materializecss.com/mobile.html', 144 | title: 'Mobile', 145 | body: 'Mobile only interactive components.' 146 | }); 147 | 148 | window.index.add({ 149 | href: 'http://materializecss.com/modals.html', 150 | title: 'modals', 151 | body: 'Use a modal for dialog boxes, confirmation messages, or other content that can be called up.' 152 | }); 153 | 154 | window.index.add({ 155 | href: 'http://materializecss.com/navbar.html', 156 | title: 'navbar', 157 | body: 'The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.' 158 | }); 159 | 160 | window.index.add({ 161 | href: 'http://materializecss.com/pagination.html', 162 | title: 'pagination', 163 | body: 'Add pagination links to help split up your long content into shorter, easier to understand blocks.' 164 | }); 165 | 166 | window.index.add({ 167 | href: 'http://materializecss.com/parallax.html', 168 | title: 'parallax', 169 | body: 'Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.' 170 | }); 171 | 172 | window.index.add({ 173 | href: 'http://materializecss.com/pickers.html', 174 | title: 'date time picker', 175 | body: 'Pickers provide a simple way to select a date or time.' 176 | }); 177 | 178 | window.index.add({ 179 | href: 'http://materializecss.com/preloader.html', 180 | title: 'preloader', 181 | body: 'If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.' 182 | }); 183 | 184 | window.index.add({ 185 | href: 'http://materializecss.com/pulse.html', 186 | title: 'pulse', 187 | body: 'Draw attention to your buttons with this subtle but captivating effect.' 188 | }); 189 | 190 | window.index.add({ 191 | href: 'http://materializecss.com/pushpin.html', 192 | title: 'Pushpin', 193 | body: 'Pushpin is our fixed positioning plugin. You can check out our live examples: the fixed Table of Contents on the right.' 194 | }); 195 | 196 | window.index.add({ 197 | href: 'http://materializecss.com/radio-buttons.html', 198 | title: 'radio buttons', 199 | body: 'Radio Buttons are used when the user must make only one selection out of a group of items.' 200 | }); 201 | 202 | window.index.add({ 203 | href: 'http://materializecss.com/range.html', 204 | title: 'range slider', 205 | body: 'Add a range slider for values with a wide range.' 206 | }); 207 | 208 | window.index.add({ 209 | href: 'http://materializecss.com/sass.html', 210 | title: 'Sass', 211 | body: 'When using Sass, you can change the color scheme of your site extremely quickly.' 212 | }); 213 | 214 | window.index.add({ 215 | href: 'http://materializecss.com/scrollspy.html', 216 | title: 'scrollspy', 217 | body: 'Scrollspy is a jQuery plugin that tracks certain elements and which element the users screen is currently centered on.' 218 | }); 219 | 220 | window.index.add({ 221 | href: 'http://materializecss.com/select.html', 222 | title: 'Select', 223 | body: 'Select allows user input through specified options.' 224 | }); 225 | 226 | window.index.add({ 227 | href: 'http://materializecss.com/shadow.html', 228 | title: 'shadow', 229 | body: 'In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.' 230 | }); 231 | 232 | window.index.add({ 233 | href: 'http://materializecss.com/showcase.html', 234 | title: 'showcase', 235 | body: 'Here is our showcase of websites that use materialize.' 236 | }); 237 | 238 | window.index.add({ 239 | href: 'http://materializecss.com/sidenav.html', 240 | title: 'sidenav side nav', 241 | body: 'This is a slide out menu. You can add a dropdown to your sidebar by using our collapsible component.' 242 | }); 243 | 244 | window.index.add({ 245 | href: 'http://materializecss.com/switches.html', 246 | title: 'Switches', 247 | body: 'Switches are special checkboxes used for binary states such as on / off' 248 | }); 249 | 250 | window.index.add({ 251 | href: 'http://materializecss.com/table.html', 252 | title: 'table', 253 | body: 'Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible.' 254 | }); 255 | 256 | window.index.add({ 257 | href: 'http://materializecss.com/tabs.html', 258 | title: 'tabs', 259 | body: 'The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.' 260 | }); 261 | 262 | window.index.add({ 263 | href: 'http://materializecss.com/text-inputs.html', 264 | title: 'Text Input Fields', 265 | body: 'Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing.' 266 | }); 267 | 268 | window.index.add({ 269 | href: 'http://materializecss.com/toasts.html', 270 | title: 'Toasts', 271 | body: 'Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively, try it out by clicking the button below on different device sizes.' 272 | }); 273 | 274 | window.index.add({ 275 | href: 'http://materializecss.com/tooltips.html', 276 | title: 'Tooltips', 277 | body: 'Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.' 278 | }); 279 | 280 | window.index.add({ 281 | href: 'http://materializecss.com/typography.html', 282 | title: 'Typography', 283 | body: 'font, headers, blockquotes, flow text.' 284 | }); 285 | 286 | window.index.add({ 287 | href: 'http://materializecss.com/waves.html', 288 | title: 'waves', 289 | body: 'Waves is an external library that weve included in Materialize to allow us to create the ink effect outlined in Material Design' 290 | }); 291 | 292 | // icon click 293 | $('ul#nav-mobile li.search .search-wrapper i.material-icons').click(function() { 294 | if ($('.search-results .focused').length) { 295 | $('.search-results .focused').first()[0].click(); 296 | } else if ($('.search-results').children().length) { 297 | $('.search-results').children().first()[0].click(); 298 | } 299 | }); 300 | 301 | var renderResults = function(results) { 302 | var resultsContainer = $('.search-results'); 303 | resultsContainer.empty(); 304 | Array.prototype.forEach.call(results, function(result) { 305 | var resultDiv = $('' + result[0] + ''); 306 | resultsContainer.append(resultDiv); 307 | }); 308 | }; 309 | 310 | var debounce = function (fn) { 311 | var timeout; 312 | return function () { 313 | var args = Array.prototype.slice.call(arguments), 314 | ctx = this; 315 | 316 | clearTimeout(timeout); 317 | timeout = setTimeout(function () { 318 | fn.apply(ctx, args); 319 | }, 100); 320 | }; 321 | }; 322 | 323 | $('input#search').focus(function() { $(this).parent().addClass('focused'); }); 324 | $('input#search').blur(function() { 325 | if (!$(this).val()) { 326 | $(this).parent().removeClass('focused'); 327 | } 328 | }); 329 | 330 | $('input#search').on('keyup', debounce(function (e) { 331 | if ($(this).val() < 2) { 332 | renderResults([]); 333 | return; 334 | } 335 | 336 | if (e.which === 38 || e.which === 40 || e.keyCode === 13) return; 337 | 338 | var query = $(this).val(); 339 | var results = window.index.search(query).slice(0, 6).map(function (result) { 340 | var href = result.ref.split('http://materializecss.com/')[1]; 341 | return [href.charAt(0).toUpperCase() + href.slice(1), href]; 342 | }); 343 | renderResults(results); 344 | })); 345 | 346 | 347 | $('input#search').on('keydown', debounce(function (e) { 348 | // Escape. 349 | if (e.keyCode === 27) { 350 | $(this).val(''); 351 | $(this).blur(); 352 | renderResults([]); 353 | return; 354 | } else if (e.keyCode === 13) { 355 | // enter 356 | if ($('.search-results .focused').length) { 357 | $('.search-results .focused').first()[0].click(); 358 | } else if ($('.search-results').children().length) { 359 | $('.search-results').children().first()[0].click(); 360 | } 361 | return; 362 | } 363 | 364 | // Arrow keys. 365 | var focused; 366 | switch(e.which) { 367 | case 38: // up 368 | if ($('.search-results .focused').length) { 369 | focused = $('.search-results .focused'); 370 | focused.removeClass('focused'); 371 | focused.prev().addClass('focused'); 372 | } 373 | break; 374 | 375 | case 40: // down 376 | if (!$('.search-results .focused').length) { 377 | focused = $('.search-results').children().first(); 378 | focused.addClass('focused'); 379 | } else { 380 | focused = $('.search-results .focused'); 381 | if (focused.next().length) { 382 | focused.removeClass('focused'); 383 | focused.next().addClass('focused'); 384 | } 385 | } 386 | break; 387 | 388 | default: return; // exit this handler for other keys 389 | } 390 | e.preventDefault(); 391 | })); 392 | 393 | 394 | 395 | }); 396 | }( jQuery )); 397 | -------------------------------------------------------------------------------- /extras/noUiSlider/nouislider.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Materialize 1.0.0-rc.2 (http://materializecss.com) 3 | * Copyright 2014-2015 Materialize 4 | * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE) 5 | */ 6 | 7 | /*! nouislider - 9.1.0 - 2016-12-10 16:00:32 */ 8 | 9 | 10 | /* Functional styling; 11 | * These styles are required for noUiSlider to function. 12 | * You don't need to change these rules to apply your design. 13 | */ 14 | .noUi-target, 15 | .noUi-target * { 16 | -webkit-touch-callout: none; 17 | -webkit-tap-highlight-color: rgba(0,0,0,0); 18 | -webkit-user-select: none; 19 | -ms-touch-action: none; 20 | touch-action: none; 21 | -ms-user-select: none; 22 | -moz-user-select: none; 23 | user-select: none; 24 | -moz-box-sizing: border-box; 25 | box-sizing: border-box; 26 | } 27 | .noUi-target { 28 | position: relative; 29 | direction: ltr; 30 | } 31 | .noUi-base { 32 | width: 100%; 33 | height: 100%; 34 | position: relative; 35 | z-index: 1; /* Fix 401 */ 36 | } 37 | .noUi-connect { 38 | position: absolute; 39 | right: 0; 40 | top: 0; 41 | left: 0; 42 | bottom: 0; 43 | } 44 | .noUi-origin { 45 | position: absolute; 46 | height: 0; 47 | width: 0; 48 | } 49 | .noUi-handle { 50 | position: relative; 51 | z-index: 1; 52 | } 53 | .noUi-state-tap .noUi-connect, 54 | .noUi-state-tap .noUi-origin { 55 | -webkit-transition: top 0.25s, right 0.25s, bottom 0.25s, left 0.25s; 56 | transition: top 0.25s, right 0.25s, bottom 0.25s, left 0.25s; 57 | } 58 | .noUi-state-drag * { 59 | cursor: inherit !important; 60 | } 61 | 62 | .noUi-handle-touch-area{ 63 | position: relative; 64 | width: 44px; 65 | height: 44px; 66 | left: -15px; 67 | top: -15px; 68 | } 69 | /* Painting and performance; 70 | * Browsers can paint handles in their own layer. 71 | */ 72 | .noUi-base, 73 | .noUi-handle { 74 | -webkit-transform: translate3d(0,0,0); 75 | transform: translate3d(0,0,0); 76 | } 77 | 78 | /* Slider size and handle placement; 79 | */ 80 | .noUi-horizontal { 81 | height: 18px; 82 | } 83 | .noUi-horizontal .noUi-handle { 84 | width: 34px; 85 | height: 28px; 86 | left: -17px; 87 | top: -6px; 88 | } 89 | .noUi-vertical { 90 | width: 18px; 91 | } 92 | .noUi-vertical .noUi-handle { 93 | width: 28px; 94 | height: 34px; 95 | left: -6px; 96 | top: -17px; 97 | } 98 | 99 | /* Styling; 100 | */ 101 | .noUi-target { 102 | background: #cdcdcd; 103 | border-radius: 4px; 104 | border: 1px solid transparent; 105 | } 106 | .noUi-connect { 107 | background: #26A69A; 108 | -webkit-transition: background 450ms; 109 | transition: background 450ms; 110 | } 111 | 112 | /* Handles and cursors; 113 | */ 114 | .noUi-draggable { 115 | cursor: ew-resize; 116 | } 117 | .noUi-vertical .noUi-draggable { 118 | cursor: ns-resize; 119 | } 120 | .noUi-handle { 121 | border: 1px solid #D9D9D9; 122 | border-radius: 3px; 123 | background: #FFF; 124 | cursor: default; 125 | box-shadow: inset 0 0 1px #FFF, 126 | inset 0 1px 7px #EBEBEB, 127 | 0 3px 6px -3px #BBB; 128 | } 129 | .noUi-active { 130 | box-shadow: inset 0 0 1px #FFF, 131 | inset 0 1px 7px #DDD, 132 | 0 3px 6px -3px #BBB; 133 | } 134 | 135 | /* Handle stripes 136 | */ 137 | .noUi-handle:before, 138 | .noUi-handle:after { 139 | content: ""; 140 | display: block; 141 | position: absolute; 142 | height: 14px; 143 | width: 1px; 144 | background: #E8E7E6; 145 | left: 14px; 146 | top: 6px; 147 | } 148 | .noUi-handle:after { 149 | left: 17px; 150 | } 151 | .noUi-vertical .noUi-handle:before, 152 | .noUi-vertical .noUi-handle:after { 153 | width: 14px; 154 | height: 1px; 155 | left: 6px; 156 | top: 14px; 157 | } 158 | .noUi-vertical .noUi-handle:after { 159 | top: 17px; 160 | } 161 | 162 | /* Disabled state; 163 | */ 164 | 165 | [disabled] .noUi-connect { 166 | background: #B8B8B8; 167 | } 168 | [disabled].noUi-target, 169 | [disabled].noUi-handle, 170 | [disabled] .noUi-handle { 171 | cursor: not-allowed; 172 | } 173 | 174 | 175 | /* Base; 176 | * 177 | */ 178 | .noUi-pips, 179 | .noUi-pips * { 180 | -moz-box-sizing: border-box; 181 | box-sizing: border-box; 182 | } 183 | .noUi-pips { 184 | position: absolute; 185 | color: #999; 186 | } 187 | 188 | /* Values; 189 | * 190 | */ 191 | .noUi-value { 192 | position: absolute; 193 | text-align: center; 194 | } 195 | .noUi-value-sub { 196 | color: #ccc; 197 | font-size: 10px; 198 | } 199 | 200 | /* Markings; 201 | * 202 | */ 203 | .noUi-marker { 204 | position: absolute; 205 | background: #CCC; 206 | } 207 | .noUi-marker-sub { 208 | background: #AAA; 209 | } 210 | .noUi-marker-large { 211 | background: #AAA; 212 | } 213 | 214 | /* Horizontal layout; 215 | * 216 | */ 217 | .noUi-pips-horizontal { 218 | padding: 10px 0; 219 | height: 80px; 220 | top: 100%; 221 | left: 0; 222 | width: 100%; 223 | } 224 | .noUi-value-horizontal { 225 | -webkit-transform: translate3d(-50%,50%,0); 226 | transform: translate3d(-50%,50%,0); 227 | } 228 | 229 | .noUi-marker-horizontal.noUi-marker { 230 | margin-left: -1px; 231 | width: 2px; 232 | height: 5px; 233 | } 234 | .noUi-marker-horizontal.noUi-marker-sub { 235 | height: 10px; 236 | } 237 | .noUi-marker-horizontal.noUi-marker-large { 238 | height: 15px; 239 | } 240 | 241 | /* Vertical layout; 242 | * 243 | */ 244 | .noUi-pips-vertical { 245 | padding: 0 10px; 246 | height: 100%; 247 | top: 0; 248 | left: 100%; 249 | } 250 | .noUi-value-vertical { 251 | -webkit-transform: translate3d(0,50%,0); 252 | transform: translate3d(0,50%,0); 253 | padding-left: 25px; 254 | } 255 | 256 | .noUi-marker-vertical.noUi-marker { 257 | width: 5px; 258 | height: 2px; 259 | margin-top: -1px; 260 | } 261 | .noUi-marker-vertical.noUi-marker-sub { 262 | width: 10px; 263 | } 264 | .noUi-marker-vertical.noUi-marker-large { 265 | width: 15px; 266 | } 267 | 268 | .noUi-tooltip { 269 | display: block; 270 | position: absolute; 271 | border: 1px solid transparent; 272 | border-radius: 3px; 273 | background: #fff; 274 | color: #000; 275 | padding: 5px; 276 | text-align: center; 277 | } 278 | .noUi-horizontal .noUi-tooltip { 279 | -webkit-transform: translate(-50%, 0); 280 | transform: translate(-50%, 0); 281 | left: 50%; 282 | bottom: 120%; 283 | } 284 | .noUi-vertical .noUi-tooltip { 285 | -webkit-transform: translate(0, -50%); 286 | transform: translate(0, -50%); 287 | top: 50%; 288 | right: 120%; 289 | } 290 | 291 | /* Materialize Styles */ 292 | .noUi-target { 293 | border: 0; 294 | border-radius: 0; 295 | } 296 | .noUi-horizontal { 297 | height: 3px; 298 | } 299 | 300 | .noUi-vertical { 301 | height: 100%; 302 | width: 3px; 303 | } 304 | 305 | .noUi-horizontal .noUi-handle, 306 | .noUi-vertical .noUi-handle { 307 | width: 15px; 308 | height: 15px; 309 | border-radius: 50%; 310 | box-shadow: none; 311 | background-color: #26A69A; 312 | border: none; 313 | left: -5px; 314 | top: -6px; 315 | transition: width .2s cubic-bezier(0.215, 0.610, 0.355, 1.000), 316 | height .2s cubic-bezier(0.215, 0.610, 0.355, 1.000), 317 | left .2s cubic-bezier(0.215, 0.610, 0.355, 1.000), 318 | top .2s cubic-bezier(0.215, 0.610, 0.355, 1.000); 319 | } 320 | .noUi-handle:before { 321 | content: none; 322 | } 323 | .noUi-handle:after { 324 | content: none; 325 | } 326 | 327 | .noUi-target .noUi-active.noUi-handle { 328 | width: 3px; 329 | height: 3px; 330 | left: 0; 331 | top: 0; 332 | } 333 | 334 | .noUi-target.noUi-horizontal .noUi-tooltip { 335 | position: absolute; 336 | height: 30px; 337 | width: 30px; 338 | top: -17px; 339 | left: -2px; 340 | background-color: #26A69A; 341 | border-radius: 50%; 342 | transition: border-radius .25s cubic-bezier(0.215, 0.610, 0.355, 1.000), 343 | transform .25s cubic-bezier(0.215, 0.610, 0.355, 1.000); 344 | transform: scale(.5) rotate(-45deg); 345 | transform-origin: 50% 100%; 346 | } 347 | .noUi-target.noUi-horizontal .noUi-active .noUi-tooltip { 348 | border-radius: 15px 15px 15px 0; 349 | transform: rotate(-45deg) translate(23px, -25px); 350 | } 351 | 352 | .noUi-tooltip span { 353 | width: 100%; 354 | text-align: center; 355 | color: #fff; 356 | font-size: 12px; 357 | opacity: 0; 358 | position: absolute; 359 | top: 6px; 360 | left: -1px; 361 | transition: opacity .25s cubic-bezier(0.215, 0.610, 0.355, 1.000); 362 | } 363 | 364 | .noUi-horizontal .noUi-tooltip span { 365 | transform: rotate(45deg); 366 | } 367 | 368 | .noUi-vertical .noUi-tooltip span { 369 | transform: rotate(135deg); 370 | } 371 | 372 | 373 | .noUi-target.noUi-vertical .noUi-tooltip { 374 | position: absolute; 375 | height: 30px; 376 | width: 30px; 377 | top: -17px; 378 | left: -2px; 379 | background-color: #26A69A; 380 | border-radius: 50%; 381 | transition: border-radius .25s cubic-bezier(0.215, 0.610, 0.355, 1.000), 382 | transform .25s cubic-bezier(0.215, 0.610, 0.355, 1.000); 383 | transform: scale(.5) rotate(-45deg); 384 | transform-origin: 50% 100%; 385 | } 386 | .noUi-target.noUi-vertical .noUi-active .noUi-tooltip { 387 | border-radius: 15px 15px 15px 0; 388 | transform: rotate(-135deg) translate(35px, -10px); 389 | } 390 | .noUi-vertical .noUi-tooltip span { 391 | width: 100%; 392 | text-align: center; 393 | color: #fff; 394 | font-size: 12px; 395 | transform: rotate(135deg); 396 | opacity: 0; 397 | position: absolute; 398 | top: 7px; 399 | left: -1px; 400 | transition: opacity .25s cubic-bezier(0.215, 0.610, 0.355, 1.000); 401 | } 402 | 403 | .noUi-horizontal .noUi-active .noUi-tooltip span, 404 | .noUi-vertical .noUi-active .noUi-tooltip span { 405 | opacity: 1; 406 | } 407 | -------------------------------------------------------------------------------- /fab-toolbar-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Floating Action Button - Materialize 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | mode_edit 26 | 27 | 33 |
34 | 35 | 36 | 37 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /fullscreen-slider-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Fullscreen Slider - Materialize 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |
    35 |
  • 36 | 37 |
    38 |

    This is our big Tagline!

    39 |
    Here's our small slogan.
    40 |
    41 |
    • 42 |
  • 43 | 44 |
    45 |

    Left Aligned Caption

    46 |
    Here's our small slogan.
    47 |
    48 |
    • 49 |
  • 50 | 51 |
    52 |

    Right Aligned Caption

    53 |
    Here's our small slogan.
    54 |
    55 |
    • 56 |
57 |
58 | 59 |
60 | close 61 | 62 | 63 |
64 | 65 | 66 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /images/Alan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/Alan.png -------------------------------------------------------------------------------- /images/alex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/alex.png -------------------------------------------------------------------------------- /images/alvin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/alvin.png -------------------------------------------------------------------------------- /images/bold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/bold.png -------------------------------------------------------------------------------- /images/favicon/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/favicon/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /images/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /images/kevin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/kevin.png -------------------------------------------------------------------------------- /images/materialize_team.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/materialize_team.jpeg -------------------------------------------------------------------------------- /images/menu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/menu.gif -------------------------------------------------------------------------------- /images/metaphor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/metaphor.png -------------------------------------------------------------------------------- /images/motion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/motion.png -------------------------------------------------------------------------------- /images/office.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/office.jpg -------------------------------------------------------------------------------- /images/parallax-template.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/parallax-template.jpg -------------------------------------------------------------------------------- /images/parallax1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/parallax1.jpg -------------------------------------------------------------------------------- /images/parallax2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/parallax2.jpg -------------------------------------------------------------------------------- /images/sample-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/sample-1.jpg -------------------------------------------------------------------------------- /images/showcase/adbeus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/showcase/adbeus.png -------------------------------------------------------------------------------- /images/showcase/closeheat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/showcase/closeheat.png -------------------------------------------------------------------------------- /images/showcase/eadbox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/showcase/eadbox.jpg -------------------------------------------------------------------------------- /images/showcase/joelcox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/showcase/joelcox.png -------------------------------------------------------------------------------- /images/showcase/kioskbrowser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/showcase/kioskbrowser.png -------------------------------------------------------------------------------- /images/showcase/roboterwelt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/showcase/roboterwelt.png -------------------------------------------------------------------------------- /images/showcase/stephaniejagiello.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/showcase/stephaniejagiello.png -------------------------------------------------------------------------------- /images/showcase/varun_malhotra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/showcase/varun_malhotra.jpg -------------------------------------------------------------------------------- /images/showcase/visitsarasota.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/showcase/visitsarasota.jpg -------------------------------------------------------------------------------- /images/showcase/webonise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/showcase/webonise.png -------------------------------------------------------------------------------- /images/starter-template.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/starter-template.gif -------------------------------------------------------------------------------- /images/toast.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/toast.gif -------------------------------------------------------------------------------- /images/yuna.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/images/yuna.jpg -------------------------------------------------------------------------------- /mobile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Mobile - Materialize 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 46 |
menu
47 | 143 | 144 | 145 |
146 | 158 |
Become a Patron
159 |
160 |
161 |
162 |
163 | 164 | 165 | 174 | 175 | 176 |
177 |

Toast

178 |

Swipe to Dismiss

179 |

On all devices, you can swipe to dismiss toasts.

180 | 181 | 182 |
183 |
184 |
185 |
186 |
187 | 188 | 189 |
190 |
191 | 195 |
196 |
197 |
198 |
199 | 200 |
201 |
202 |
203 |
204 |
205 |
206 |
Help Materialize Grow
207 |

We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

208 | Support Us 209 | 210 |
211 |
212 |
Join the Discussion
213 |

We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.

214 | Chat 215 |
216 |
217 |
Connect
218 | 219 |
220 | 221 |
222 |
223 |
224 |
225 | 226 |
227 |
228 |
Patreon Sponsors
229 |
230 |
231 |
232 | 233 | KeyCDN 234 | 235 |
236 |
237 | 238 | Universal Dashboard 239 | 240 |
241 |
242 | 243 | Spaculus 244 | 245 |
246 |
247 | 248 | WrapPixel 249 | 250 |
251 |
252 | 253 | crypto EFX 254 | 255 |
256 |
257 | 258 | Webdock 259 | 260 |
261 |
262 | 263 | CryptAPI 264 | 265 |
266 |
267 | 268 | HostPresto 269 | 270 |
271 |
272 | 273 | Seareach 274 | 275 |
276 |
277 | 278 | Lucid Ocean 279 | 280 |
281 |
282 | 283 | Capture and archive website screenshots automatically with Stillio 284 | 285 |
286 |
287 | 288 | Gaggle Mail 289 | 290 |
291 |
292 | 293 | Icons8 294 | 295 |
296 |
297 | 298 | Philadelphia Web Design & SEO Agency 299 | 300 |
301 |
302 | 303 | Brand New Web 304 | 305 |
306 |
307 | 308 | Open source fully loaded CMS in #2019 309 | 310 |
311 |
312 | 313 | YourLabs Business Service: Digital Strategy Consulting 314 | 315 |
316 |
317 |
318 | 319 |
320 | © 2014- Materialize, All rights reserved. 321 | MIT License 322 |
323 | 324 |
325 |
326 |
327 |
328 | 329 | 330 | 331 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 356 | 357 | 358 | -------------------------------------------------------------------------------- /parallax-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Parallax - Materialize 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 | 45 |
46 | 47 |
48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 |

Parallax

56 |

Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.

57 | 58 |

Parallax Demo HTML

59 | 

 60 |     <div class="parallax-container">
 61 |       <div class="parallax"><img src="images/parallax1.jpg"></div>
 62 |     </div>
 63 |     <div class="section white">
 64 |       <div class="row container">
 65 |         <h2 class="header">Parallax</h2>
 66 |         <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
 67 |       </div>
 68 |     </div>
 69 |     <div class="parallax-container">
 70 |       <div class="parallax"><img src="images/parallax2.jpg"></div>
 71 |     </div>
 72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | 80 |
81 | close 82 | 83 | 84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
Help Materialize Grow
92 |

We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

93 | Support Us 94 | 95 |
96 |
97 |
Join the Discussion
98 |

We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.

99 | Chat 100 |
101 |
102 |
Connect
103 | 104 |
105 | 106 |
107 |
108 |
109 |
110 | 111 |
112 |
113 |
Patreon Sponsors
114 |
115 |
116 |
117 | 118 | KeyCDN 119 | 120 |
121 |
122 | 123 | Universal Dashboard 124 | 125 |
126 |
127 | 128 | Spaculus 129 | 130 |
131 |
132 | 133 | WrapPixel 134 | 135 |
136 |
137 | 138 | crypto EFX 139 | 140 |
141 |
142 | 143 | Webdock 144 | 145 |
146 |
147 | 148 | CryptAPI 149 | 150 |
151 |
152 | 153 | HostPresto 154 | 155 |
156 |
157 | 158 | Seareach 159 | 160 |
161 |
162 | 163 | Lucid Ocean 164 | 165 |
166 |
167 | 168 | Capture and archive website screenshots automatically with Stillio 169 | 170 |
171 |
172 | 173 | Gaggle Mail 174 | 175 |
176 |
177 | 178 | Icons8 179 | 180 |
181 |
182 | 183 | Philadelphia Web Design & SEO Agency 184 | 185 |
186 |
187 | 188 | Brand New Web 189 | 190 |
191 |
192 | 193 | Open source fully loaded CMS in #2019 194 | 195 |
196 |
197 | 198 | YourLabs Business Service: Digital Strategy Consulting 199 | 200 |
201 |
202 |
203 | 204 |
205 | © 2014- Materialize, All rights reserved. 206 | MIT License 207 |
208 | 209 |
210 |
211 |
212 |
213 | 214 | 215 | 216 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 241 | 242 | 243 | -------------------------------------------------------------------------------- /pulse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pulse - Materialize 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 46 |
menu
47 | 143 | 144 | 145 |
146 | 158 |
Become a Patron
159 |
160 |
161 |
162 |
163 | 164 |
165 |

Draw attention to your buttons with this subtle but captivating effect. Just add the class pulse to your button. Note: This is meant for floating buttons, so it may not work perfectly with every component.

166 | 167 |
168 |
169 | menu 170 | cloud 171 | edit 172 |
173 |
174 | 175 |
Pulse HTML Structure
176 | 

177 | <a class="btn-floating pulse"><i class="material-icons">menu</i></a>
178 | <a class="btn-floating btn-large pulse"><i class="material-icons">cloud</i></a>
179 | <a class="btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>
180 |
181 |
182 |
183 | 184 | 185 |
186 |
187 |
188 | 189 | 190 |
191 |
192 | 195 |
196 |
197 |
198 | 199 |
200 |
201 | 202 |
203 |
204 |
205 |
206 |
207 |
208 |
Help Materialize Grow
209 |

We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

210 | Support Us 211 | 212 |
213 |
214 |
Join the Discussion
215 |

We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.

216 | Chat 217 |
218 |
219 |
Connect
220 | 221 |
222 | 223 |
224 |
225 |
226 |
227 | 228 |
229 |
230 |
Patreon Sponsors
231 |
232 |
233 |
234 | 235 | KeyCDN 236 | 237 |
238 |
239 | 240 | Universal Dashboard 241 | 242 |
243 |
244 | 245 | Spaculus 246 | 247 |
248 |
249 | 250 | WrapPixel 251 | 252 |
253 |
254 | 255 | crypto EFX 256 | 257 |
258 |
259 | 260 | Webdock 261 | 262 |
263 |
264 | 265 | CryptAPI 266 | 267 |
268 |
269 | 270 | HostPresto 271 | 272 |
273 |
274 | 275 | Seareach 276 | 277 |
278 |
279 | 280 | Lucid Ocean 281 | 282 |
283 |
284 | 285 | Capture and archive website screenshots automatically with Stillio 286 | 287 |
288 |
289 | 290 | Gaggle Mail 291 | 292 |
293 |
294 | 295 | Icons8 296 | 297 |
298 |
299 | 300 | Philadelphia Web Design & SEO Agency 301 | 302 |
303 |
304 | 305 | Brand New Web 306 | 307 |
308 |
309 | 310 | Open source fully loaded CMS in #2019 311 | 312 |
313 |
314 | 315 | YourLabs Business Service: Digital Strategy Consulting 316 | 317 |
318 |
319 |
320 | 321 |
322 | © 2014- Materialize, All rights reserved. 323 | MIT License 324 |
325 | 326 |
327 |
328 |
329 |
330 | 331 | 332 | 333 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 358 | 359 | 360 | -------------------------------------------------------------------------------- /pushpin-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pushpin Demo - Materialize 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 43 | 44 |
45 | 57 |
58 | 59 |
60 | 72 |
73 | 74 |
75 | 87 |
88 | 89 |
90 | close 91 | 92 | 93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
Help Materialize Grow
101 |

We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

102 | Support Us 103 | 104 |
105 |
106 |
Join the Discussion
107 |

We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.

108 | Chat 109 |
110 |
111 |
Connect
112 | 113 |
114 | 115 |
116 |
117 |
118 |
119 | 120 |
121 |
122 |
Patreon Sponsors
123 |
124 |
125 |
126 | 127 | KeyCDN 128 | 129 |
130 |
131 | 132 | Universal Dashboard 133 | 134 |
135 |
136 | 137 | Spaculus 138 | 139 |
140 |
141 | 142 | WrapPixel 143 | 144 |
145 |
146 | 147 | crypto EFX 148 | 149 |
150 |
151 | 152 | Webdock 153 | 154 |
155 |
156 | 157 | CryptAPI 158 | 159 |
160 |
161 | 162 | HostPresto 163 | 164 |
165 |
166 | 167 | Seareach 168 | 169 |
170 |
171 | 172 | Lucid Ocean 173 | 174 |
175 |
176 | 177 | Capture and archive website screenshots automatically with Stillio 178 | 179 |
180 |
181 | 182 | Gaggle Mail 183 | 184 |
185 |
186 | 187 | Icons8 188 | 189 |
190 |
191 | 192 | Philadelphia Web Design & SEO Agency 193 | 194 |
195 |
196 | 197 | Brand New Web 198 | 199 |
200 |
201 | 202 | Open source fully loaded CMS in #2019 203 | 204 |
205 |
206 | 207 | YourLabs Business Service: Digital Strategy Consulting 208 | 209 |
210 |
211 |
212 | 213 |
214 | © 2014- Materialize, All rights reserved. 215 | MIT License 216 |
217 | 218 |
219 |
220 |
221 |
222 | 223 | 224 | 225 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /switches.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Switches - Materialize 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 46 |
menu
47 | 143 | 144 | 145 |
146 | 158 |
Become a Patron
159 |
160 |
161 |
162 | 163 |
164 | 165 | 166 |
167 |

Switches are special checkboxes used for binary states such as on / off

168 |
169 |

170 |

171 | 177 |
178 |

179 | 180 |

181 |

182 | 188 |
189 |

190 | 191 |
192 |
193 | 

194 |   <!-- Switch -->
195 |   <div class="switch">
196 |     <label>
197 |       Off
198 |       <input type="checkbox">
199 |       <span class="lever"></span>
200 |       On
201 |     </label>
202 |   </div>
203 | 
204 |   <!-- Disabled Switch -->
205 |   <div class="switch">
206 |     <label>
207 |       Off
208 |       <input disabled type="checkbox">
209 |       <span class="lever"></span>
210 |       On
211 |     </label>
212 |   </div>
213 |
214 |
215 | 216 | 217 |
218 |
219 |
220 |
221 | 222 | 223 |
224 |
225 | 228 |
229 |
230 |
231 | 232 |
233 |
234 | 235 |
236 |
237 |
238 |
239 |
240 |
241 |
Help Materialize Grow
242 |

We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

243 | Support Us 244 | 245 |
246 |
247 |
Join the Discussion
248 |

We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.

249 | Chat 250 |
251 |
252 |
Connect
253 | 254 |
255 | 256 |
257 |
258 |
259 |
260 | 261 |
262 |
263 |
Patreon Sponsors
264 |
265 |
266 |
267 | 268 | KeyCDN 269 | 270 |
271 |
272 | 273 | Universal Dashboard 274 | 275 |
276 |
277 | 278 | Spaculus 279 | 280 |
281 |
282 | 283 | WrapPixel 284 | 285 |
286 |
287 | 288 | crypto EFX 289 | 290 |
291 |
292 | 293 | Webdock 294 | 295 |
296 |
297 | 298 | CryptAPI 299 | 300 |
301 |
302 | 303 | HostPresto 304 | 305 |
306 |
307 | 308 | Seareach 309 | 310 |
311 |
312 | 313 | Lucid Ocean 314 | 315 |
316 |
317 | 318 | Capture and archive website screenshots automatically with Stillio 319 | 320 |
321 |
322 | 323 | Gaggle Mail 324 | 325 |
326 |
327 | 328 | Icons8 329 | 330 |
331 |
332 | 333 | Philadelphia Web Design & SEO Agency 334 | 335 |
336 |
337 | 338 | Brand New Web 339 | 340 |
341 |
342 | 343 | Open source fully loaded CMS in #2019 344 | 345 |
346 |
347 | 348 | YourLabs Business Service: Digital Strategy Consulting 349 | 350 |
351 |
352 |
353 | 354 |
355 | © 2014- Materialize, All rights reserved. 356 | MIT License 357 |
358 | 359 |
360 |
361 |
362 |
363 | 364 | 365 | 366 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 391 | 392 | 393 | -------------------------------------------------------------------------------- /templates/parallax-template.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/templates/parallax-template.zip -------------------------------------------------------------------------------- /templates/parallax-template/background1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/templates/parallax-template/background1.jpg -------------------------------------------------------------------------------- /templates/parallax-template/background2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/templates/parallax-template/background2.jpg -------------------------------------------------------------------------------- /templates/parallax-template/background3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/templates/parallax-template/background3.jpg -------------------------------------------------------------------------------- /templates/parallax-template/css/style.css: -------------------------------------------------------------------------------- 1 | /* Custom Stylesheet */ 2 | /** 3 | * Use this file to override Materialize files so you can update 4 | * the core Materialize files in the future 5 | * 6 | * Made By MaterializeCSS.com 7 | */ 8 | 9 | nav ul a, 10 | nav .brand-logo { 11 | color: #444; 12 | } 13 | 14 | p { 15 | line-height: 2rem; 16 | } 17 | 18 | .sidenav-trigger { 19 | color: #26a69a; 20 | } 21 | 22 | .parallax-container { 23 | min-height: 380px; 24 | line-height: 0; 25 | height: auto; 26 | color: rgba(255,255,255,.9); 27 | } 28 | .parallax-container .section { 29 | width: 100%; 30 | } 31 | 32 | @media only screen and (max-width : 992px) { 33 | .parallax-container .section { 34 | position: absolute; 35 | top: 40%; 36 | } 37 | #index-banner .section { 38 | top: 10%; 39 | } 40 | } 41 | 42 | @media only screen and (max-width : 600px) { 43 | #index-banner .section { 44 | top: 0; 45 | } 46 | } 47 | 48 | .icon-block { 49 | padding: 0 15px; 50 | } 51 | .icon-block .material-icons { 52 | font-size: inherit; 53 | } 54 | 55 | footer.page-footer { 56 | margin: 0; 57 | } 58 | -------------------------------------------------------------------------------- /templates/parallax-template/js/init.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | $(function(){ 3 | 4 | $('.sidenav').sidenav(); 5 | $('.parallax').parallax(); 6 | 7 | }); // end of document ready 8 | })(jQuery); // end of jQuery name space 9 | -------------------------------------------------------------------------------- /templates/parallax-template/preview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Parallax Template - Materialize 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 27 | 28 |
29 |
30 |
31 |

32 |

Parallax Template

33 |
34 |
A modern responsive front-end framework based on Material Design
35 |
36 |
37 | Get Started 38 |
39 |

40 | 41 |
42 |
43 |
Unsplashed background img 1
44 |
45 | 46 | 47 |
48 |
49 | 50 | 51 |
52 |
53 |
54 |

flash_on

55 |
Speeds up development
56 | 57 |

We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.

58 |
59 |
60 | 61 |
62 |
63 |

group

64 |
User Experience Focused
65 | 66 |

By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.

67 |
68 |
69 | 70 |
71 |
72 |

settings

73 |
Easy to work with
74 | 75 |

We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.

76 |
77 |
78 |
79 | 80 |
81 |
82 | 83 | 84 |
85 |
86 |
87 |
88 |
A modern responsive front-end framework based on Material Design
89 |
90 |
91 |
92 |
Unsplashed background img 2
93 |
94 | 95 |
96 |
97 | 98 |
99 |
100 |

101 |

Contact Us

102 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

103 |
104 |
105 | 106 |
107 |
108 | 109 | 110 |
111 |
112 |
113 |
114 |
A modern responsive front-end framework based on Material Design
115 |
116 |
117 |
118 |
Unsplashed background img 3
119 |
120 | 121 |
122 |
123 |
124 |
125 |
Company Bio
126 |

We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.

127 | 128 | 129 |
130 |
131 |
Settings
132 | 138 |
139 |
140 |
Connect
141 | 147 |
148 |
149 |
150 |
151 |
152 | Made by Materialize 153 |
154 |
155 |
156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | -------------------------------------------------------------------------------- /templates/starter-template.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boiyelove/materializecss-docs/c35906b3679004bd15f1e69f02a902db51ccb1bd/templates/starter-template.zip -------------------------------------------------------------------------------- /templates/starter-template/css/style.css: -------------------------------------------------------------------------------- 1 | /* Custom Stylesheet */ 2 | /** 3 | * Use this file to override Materialize files so you can update 4 | * the core Materialize files in the future 5 | * 6 | * Made By MaterializeCSS.com 7 | */ 8 | 9 | .icon-block { 10 | padding: 0 15px; 11 | } 12 | .icon-block .material-icons { 13 | font-size: inherit; 14 | } -------------------------------------------------------------------------------- /templates/starter-template/js/init.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | $(function(){ 3 | 4 | $('.sidenav').sidenav(); 5 | 6 | }); // end of document ready 7 | })(jQuery); // end of jQuery name space 8 | -------------------------------------------------------------------------------- /templates/starter-template/preview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Starter Template - Materialize 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 26 |
27 |
28 |

29 |

Starter Template

30 |
31 |
A modern responsive front-end framework based on Material Design
32 |
33 |
34 | Get Started 35 |
36 |

37 | 38 |
39 |
40 | 41 | 42 |
43 |
44 | 45 | 46 |
47 |
48 |
49 |

flash_on

50 |
Speeds up development
51 | 52 |

We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.

53 |
54 |
55 | 56 |
57 |
58 |

group

59 |
User Experience Focused
60 | 61 |

By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.

62 |
63 |
64 | 65 |
66 |
67 |

settings

68 |
Easy to work with
69 | 70 |

We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.

71 |
72 |
73 |
74 | 75 |
76 |

77 |
78 | 79 |
80 |
81 |
82 |
83 |
Company Bio
84 |

We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.

85 | 86 | 87 |
88 |
89 |
Settings
90 | 96 |
97 |
98 |
Connect
99 | 105 |
106 |
107 |
108 |
109 |
110 | Made by Materialize 111 |
112 |
113 |
114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | --------------------------------------------------------------------------------