5 | 
12 | 
19 | 
13 |
14 | 
22 |
23 | 
19 | 
18 | 
19 |
20 |
21 |
43 |
22 |
25 | Parallax
23 |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.
24 |
26 |
42 | Parallax Demo HTML
27 |
28 | <div class="parallax-container">
29 | <div class="parallax"><img src="images/parallax1.jpg"></div>
30 | </div>
31 | <div class="section white">
32 | <div class="row container">
33 | <h2 class="header">Parallax</h2>
34 | <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>
35 | </div>
36 | </div>
37 | <div class="parallax-container">
38 | <div class="parallax"><img src="images/parallax2.jpg"></div>
39 | </div>
40 |
44 | 
45 |
--------------------------------------------------------------------------------
/jade/page-contents/breadcrumbs_content.html:
--------------------------------------------------------------------------------
1 |
2 |
61 |
62 |
--------------------------------------------------------------------------------
/js/parallax.js:
--------------------------------------------------------------------------------
1 | (function ($) {
2 |
3 | $.fn.parallax = function () {
4 | var window_width = $(window).width();
5 | // Parallax Scripts
6 | return this.each(function(i) {
7 | var $this = $(this);
8 | $this.addClass('parallax');
9 |
10 | function updateParallax(initial) {
11 | var container_height;
12 | if (window_width < 601) {
13 | container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height();
14 | }
15 | else {
16 | container_height = ($this.height() > 0) ? $this.height() : 500;
17 | }
18 | var $img = $this.children("img").first();
19 | var img_height = $img.height();
20 | var parallax_dist = img_height - container_height;
21 | var bottom = $this.offset().top + container_height;
22 | var top = $this.offset().top;
23 | var scrollTop = $(window).scrollTop();
24 | var windowHeight = window.innerHeight;
25 | var windowBottom = scrollTop + windowHeight;
26 | var percentScrolled = (windowBottom - top) / (container_height + windowHeight);
27 | var parallax = Math.round((parallax_dist * percentScrolled));
28 |
29 | if (initial) {
30 | $img.css('display', 'block');
31 | }
32 | if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) {
33 | $img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
34 | }
35 |
36 | }
37 |
38 | // Wait for image load
39 | $this.children("img").one("load", function() {
40 | updateParallax(true);
41 | }).each(function() {
42 | if(this.complete) $(this).load();
43 | });
44 |
45 | $(window).scroll(function() {
46 | window_width = $(window).width();
47 | updateParallax(false);
48 | });
49 |
50 | $(window).resize(function() {
51 | window_width = $(window).width();
52 | updateParallax(false);
53 | });
54 |
55 | });
56 |
57 | };
58 | }( jQuery ));
--------------------------------------------------------------------------------
/jade/page-contents/chips_content.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
60 |
5 |
6 |
7 |
44 |
45 |
58 |
59 |
8 |
9 |
40 |
41 |
42 |
43 |
10 |
39 |
11 |
25 |
37 |
38 | Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.
12 |Basic
13 | 14 | 23 | 24 |25 |
26 | <nav>
27 | <div class="nav-wrapper">
28 | <div class="col s12">
29 | <a href="#!" class="breadcrumb">First</a>
30 | <a href="#!" class="breadcrumb">Second</a>
31 | <a href="#!" class="breadcrumb">Third</a>
32 | </div>
33 | </div>
34 | </nav>
35 | 37 |
2 |
68 |
69 |
--------------------------------------------------------------------------------
/sass/components/forms/_switches.scss:
--------------------------------------------------------------------------------
1 | /* Switch
2 | ========================================================================== */
3 |
4 | .switch,
5 | .switch * {
6 | -webkit-user-select: none;
7 | -moz-user-select: none;
8 | -khtml-user-select: none;
9 | -ms-user-select: none;
10 | }
11 |
12 | .switch label {
13 | cursor: pointer;
14 | }
15 |
16 | .switch label input[type=checkbox] {
17 | opacity: 0;
18 | width: 0;
19 | height: 0;
20 |
21 | &:checked + .lever {
22 | background-color: $switch-checked-lever-bg;
23 |
24 | &:after {
25 | background-color: $switch-bg-color;
26 | left: 24px;
27 | }
28 | }
29 | }
30 |
31 | .switch label .lever {
32 | content: "";
33 | display: inline-block;
34 | position: relative;
35 | width: 40px;
36 | height: 15px;
37 | background-color: $switch-unchecked-lever-bg;
38 | border-radius: $switch-radius;
39 | margin-right: 10px;
40 | transition: background 0.3s ease;
41 | vertical-align: middle;
42 | margin: 0 16px;
43 |
44 | &:after {
45 | content: "";
46 | position: absolute;
47 | display: inline-block;
48 | width: 21px;
49 | height: 21px;
50 | background-color: $switch-unchecked-bg;
51 | border-radius: 21px;
52 | box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
53 | left: -5px;
54 | top: -3px;
55 | transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
56 | }
57 | }
58 |
59 | // Switch active style
60 | input[type=checkbox]:checked:not(:disabled) ~ .lever:active::after,
61 | input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::after {
62 | box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px transparentize($switch-bg-color, .9);
63 | }
64 |
65 | input[type=checkbox]:not(:disabled) ~ .lever:active:after,
66 | input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::after {
67 | box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px rgba(0, 0, 0, .08);
68 | }
69 |
70 | // Disabled Styles
71 | .switch input[type=checkbox][disabled] + .lever {
72 | cursor: default;
73 | }
74 |
75 | .switch label input[type=checkbox][disabled] + .lever:after,
76 | .switch label input[type=checkbox][disabled]:checked + .lever:after {
77 | background-color: $input-disabled-solid-color;
78 | }
79 |
--------------------------------------------------------------------------------
/js/character_counter.js:
--------------------------------------------------------------------------------
1 | (function ($) {
2 |
3 | $.fn.characterCounter = function(){
4 | return this.each(function(){
5 | var $input = $(this);
6 | var $counterElement = $input.parent().find('span[class="character-counter"]');
7 |
8 | // character counter has already been added appended to the parent container
9 | if ($counterElement.length) {
10 | return;
11 | }
12 |
13 | var itHasLengthAttribute = $input.attr('length') !== undefined;
14 |
15 | if(itHasLengthAttribute){
16 | $input.on('input', updateCounter);
17 | $input.on('focus', updateCounter);
18 | $input.on('blur', removeCounterElement);
19 |
20 | addCounterElement($input);
21 | }
22 |
23 | });
24 | };
25 |
26 | function updateCounter(){
27 | var maxLength = +$(this).attr('length'),
28 | actualLength = +$(this).val().length,
29 | isValidLength = actualLength <= maxLength;
30 |
31 | $(this).parent().find('span[class="character-counter"]')
32 | .html( actualLength + '/' + maxLength);
33 |
34 | addInputStyle(isValidLength, $(this));
35 | }
36 |
37 | function addCounterElement($input) {
38 | var $counterElement = $input.parent().find('span[class="character-counter"]');
39 |
40 | if ($counterElement.length) {
41 | return;
42 | }
43 |
44 | $counterElement = $('')
45 | .addClass('character-counter')
46 | .css('float','right')
47 | .css('font-size','12px')
48 | .css('height', 1);
49 |
50 | $input.parent().append($counterElement);
51 | }
52 |
53 | function removeCounterElement(){
54 | $(this).parent().find('span[class="character-counter"]').html('');
55 | }
56 |
57 | function addInputStyle(isValidLength, $input){
58 | var inputHasInvalidClass = $input.hasClass('invalid');
59 | if (isValidLength && inputHasInvalidClass) {
60 | $input.removeClass('invalid');
61 | }
62 | else if(!isValidLength && !inputHasInvalidClass){
63 | $input.removeClass('valid');
64 | $input.addClass('invalid');
65 | }
66 | }
67 |
68 | $(document).ready(function(){
69 | $('input, textarea').characterCounter();
70 | });
71 |
72 | }( jQuery ));
73 |
--------------------------------------------------------------------------------
/tests/spec/toast/toastSpec.js:
--------------------------------------------------------------------------------
1 | describe( 'Toasts:', function() {
2 | var toastOutDuration = 375;
3 | var toastInDuration = 300;
4 | var toast;
5 |
6 | describe('Toast javascript functions', function() {
7 | // Toast out animation duration does not count as part of its timer.
8 | it('should display and remove a toast', function(done) {
9 | Materialize.toast('Test toast', toastInDuration);
10 |
11 | setTimeout(function() {
12 | toast = $('.toast');
13 | expect(toast.length).toBe(1);
14 | expect(toast).toBeVisible();
15 | expect(toast.text()).toBe('Test toast');
16 | setTimeout(function() {
17 | toast = $('.toast');
18 | expect(toast).toBeVisible();
19 | expect(toast.length).toBe(1, 'because toast duration still on going');
20 | setTimeout(function() {
21 | toast = $('.toast');
22 | expect(toast.length).toBe(0, 'because toast should be removed by now');
23 | done();
24 | }, toastOutDuration + 90); // .1s leeway is given
25 | }, 10);
26 | }, toastInDuration);
27 | });
28 |
29 | it('Opens a toast with HTML content', function() {
30 | var $toastContent = $('I am toast content');
31 | Materialize.toast($toastContent, 400);
32 | toast = $('.toast');
33 | expect(toast.first('span').text()).toBe('I am toast content');
34 | expect(toast.first('span').text()).not.toBe('I am toast')
35 | });
36 |
37 | it('Toasts should call the callback function when dismissed',
38 | function(done) {
39 | var boolObj = {wasCalled: false};
40 | var callback = function() {
41 | boolObj.wasCalled = true;
42 | };
43 | Materialize.toast('I am a toast', 100, '', callback);
44 | setTimeout(function() {
45 | expect(boolObj.wasCalled).toBe(true,
46 | 'because the callback set it to true');
47 | done();
48 | }, 500);
49 | });
50 |
51 | it('Apply two custom class to a toast', function() {
52 | Materialize.toast('Hi', 400, 'round flat');
53 | toast = $('.toast');
54 | expect(toast.closest('.round.flat').length).toBe(1,
55 | 'because the class parameter was passed with two classes');
56 | });
57 |
58 | });
59 |
60 |
61 | });
62 |
--------------------------------------------------------------------------------
/sass/components/_collapsible.scss:
--------------------------------------------------------------------------------
1 | .collapsible {
2 | border-top: 1px solid $collapsible-border-color;
3 | border-right: 1px solid $collapsible-border-color;
4 | border-left: 1px solid $collapsible-border-color;
5 | margin: $element-top-margin 0 $element-bottom-margin 0;
6 | @extend .z-depth-1;
7 | }
8 |
9 | .collapsible-header {
10 | display: block;
11 | cursor: pointer;
12 | min-height: $collapsible-height;
13 | line-height: $collapsible-height;
14 | padding: 0 1rem;
15 | background-color: $collapsible-header-color;
16 | border-bottom: 1px solid $collapsible-border-color;
17 |
18 | i {
19 | width: 2rem;
20 | font-size: 1.6rem;
21 | line-height: $collapsible-height;
22 | display: block;
23 | float: left;
24 | text-align: center;
25 | margin-right: 1rem;
26 | }
27 | }
28 |
29 | .collapsible-body {
30 | display: none;
31 | border-bottom: 1px solid $collapsible-border-color;
32 | box-sizing: border-box;
33 |
34 | p {
35 | margin: 0;
36 | padding: 2rem;
37 | }
38 | }
39 |
40 | // sideNav collapsible styling
41 | .side-nav,
42 | .side-nav.fixed {
43 |
44 | .collapsible {
45 | border: none;
46 | box-shadow: none;
47 |
48 | li { padding: 0; }
49 | }
50 |
51 | .collapsible-header {
52 | background-color: transparent;
53 | border: none;
54 | line-height: inherit;
55 | height: inherit;
56 | padding: 0 $sidenav-padding-right;
57 |
58 | &:hover { background-color: rgba(0,0,0,.05); }
59 | i { line-height: inherit; }
60 | }
61 |
62 | .collapsible-body {
63 | border: 0;
64 | background-color: $collapsible-header-color;
65 |
66 | li a {
67 | padding: 0 (7.5px + $sidenav-padding-right)
68 | 0 (15px + $sidenav-padding-right);
69 | }
70 | }
71 |
72 | }
73 |
74 | // Popout Collapsible
75 |
76 | .collapsible.popout {
77 | border: none;
78 | box-shadow: none;
79 | > li {
80 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
81 | // transform: scaleX(.92);
82 | margin: 0 24px;
83 | transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
84 | }
85 | > li.active {
86 | box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
87 | margin: 16px 0;
88 | // transform: scaleX(1);
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/jade/parallax/parallax_content.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
67 |
5 |
6 |
48 |
49 |
50 |
51 |
65 |
66 |
7 |
20 |
21 | Introduction
8 |9 | Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags. 10 |
11 |
12 | 
13 | Jane Doe
14 |
15 |
13 | Jane Doe
14 |
16 | Tag
17 | close
18 |
19 |
22 |
33 |
34 | Contacts
23 |24 | To create a contact chip just add an img inside. 25 |
26 |
27 | <div class="chip">
28 | <img src="images/yuna.jpg" alt="Contact Person">
29 | Jane Doe
30 | </div>
31 |
35 |
46 |
47 | Tags
36 |37 | To create a tag chip just add an close icon inside. 38 |
39 |
40 | <div class="chip">
41 | Tag
42 | <i class="material-icons">close</i>
43 | </div>
44 |
23 |
24 |
25 |
26 |
48 |
27 |
30 | Parallax
28 |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.
29 |
31 |
47 | Parallax Demo HTML
32 |
33 | <div class="parallax-container">
34 | <div class="parallax"><img src="images/parallax1.jpg"></div>
35 | </div>
36 | <div class="section white">
37 | <div class="row container">
38 | <h2 class="header">Parallax</h2>
39 | <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>
40 | </div>
41 | </div>
42 | <div class="parallax-container">
43 | <div class="parallax"><img src="images/parallax2.jpg"></div>
44 | </div>
45 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/sass/components/_roboto.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Roboto";
3 | src: local(Roboto Thin), url('#{$roboto-font-path}Roboto-Thin.eot');
4 | src: url("#{$roboto-font-path}Roboto-Thin.eot?#iefix") format('embedded-opentype'),
5 | url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
6 | url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
7 | url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");
8 |
9 | font-weight: 200;
10 | }
11 | @font-face {
12 | font-family: "Roboto";
13 | src: local(Roboto Light), url('#{$roboto-font-path}Roboto-Light.eot');
14 | src: url("#{$roboto-font-path}Roboto-Light.eot?#iefix") format('embedded-opentype'),
15 | url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
16 | url("#{$roboto-font-path}Roboto-Light.woff") format("woff"),
17 | url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype");
18 | font-weight: 300;
19 | }
20 |
21 | @font-face {
22 | font-family: "Roboto";
23 | src: local(Roboto Regular), url('#{$roboto-font-path}Roboto-Regular.eot');
24 | src: url("#{$roboto-font-path}Roboto-Regular.eot?#iefix") format('embedded-opentype'),
25 | url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
26 | url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"),
27 | url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype");
28 | font-weight: 400;
29 | }
30 |
31 | @font-face {
32 | font-family: "Roboto";
33 | src: url('#{$roboto-font-path}Roboto-Medium.eot');
34 | src: url("#{$roboto-font-path}Roboto-Medium.eot?#iefix") format('embedded-opentype'),
35 | url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
36 | url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"),
37 | url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype");
38 | font-weight: 500;
39 | }
40 |
41 | @font-face {
42 | font-family: "Roboto";
43 | src: url('#{$roboto-font-path}Roboto-Bold.eot');
44 | src: url("#{$roboto-font-path}Roboto-Bold.eot?#iefix") format('embedded-opentype'),
45 | url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
46 | url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"),
47 | url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype");
48 | font-weight: 700;
49 | }
50 |
--------------------------------------------------------------------------------
/test/html/tabs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
29 |
41 |
42 |
43 | Test 1
44 | Test 2
45 | Test 3
46 | Test 4
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # INSTALL
2 | ```
3 | $ meteor add fourseven:scss
4 | $ meteor add poetic:materialize-scss
5 | $ meteor remove materialize:materialize # if you have materialize installed
6 | ```
7 |
8 | # SCSS
9 | Add the following lines to your last-loaded scss file (E.G. main.scss):
10 | ```
11 | // If you want to override materialize sass variables you can uncomment the following:
12 | // @import "{poetic:materialize-scss}/sass/components/_color.scss";
13 | // $primary-color: color("blue", "lighten-2");
14 |
15 | // import main scss file
16 | @import "{poetic:materialize-scss}/sass/materialize.scss";
17 | ```
18 |
19 | # ICONS
20 | Icons are automatically imported from this package.
21 |
22 | You do NOT have to add an additional head element mentioned at http://materializecss.com/icons.html.
23 |
24 | Read more about the MaterialIcons at https://google.github.io/material-design-icons/
25 |
26 | # JAVASCRIPT
27 | Javascript is automatically imported from this package.
28 |
29 | # CHANGE LOG
30 |
31 | - 2016-04-18 update to materializecss [0.97.6](https://github.com/Dogfalo/materialize/tree/v0.97.6#changelog)
32 | - 2016-01-28 update to materializecss [0.97.5](https://github.com/Dogfalo/materialize/tree/v0.97.5#changelog)
33 | - 2015-11-22 update to materializecss [0.97.3](https://github.com/Dogfalo/materialize/tree/v0.97.3#changelog)
34 | - We rewrote the package as a fork and archived the previous gitrop. If you are looking for code in a version lower than 1.97.3, please check the archived [repo](https://github.com/poetic/meteor-materialize-sass-archived). (*Breaking*)
35 |
36 | - 2015-10-01 update package for METEOR@1.2 (*Breaking*)
37 | - fourseven:scss is updated to 3.3.3_1
38 | - scss.json is not used anymore.
39 | - index.scss is not autoupdated anymore, you need to manullay update index.scss.
40 |
41 | - 2015-06-26 upgrade to [0.97.0](https://github.com/Dogfalo/materialize/tree/v0.97.0#changelog)
42 | - Icon Change (*Breaking*):
43 |
44 | `````` is still supported.
45 |
46 | However you should use ```add``` instead as
47 | metioned in the materialize [doc](http://materializecss.com/icons.html).
48 |
49 | # FOR MAINTAINERS
50 |
51 | - HOW TO UPDATE TO NEW VERSIONS OF MATERIALIZECSS
52 | ```
53 | git checkout master
54 | git pull https://github.com/Dogfalo/materialize.git master --tags
55 | git checkout meteor
56 | git rebase master
57 | // check if we need to add new files to package.js
58 | // change meteor package version
59 | // test
60 | meteor publish
61 | ```
62 |
--------------------------------------------------------------------------------
/jade/page-contents/pushpin_content.html:
--------------------------------------------------------------------------------
1 |
2 |
73 |
--------------------------------------------------------------------------------
/jade/page-contents/parallax_content.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
72 |
5 |
6 |
52 |
53 |
54 |
55 |
70 |
71 |
7 |
10 |
11 |
12 |
13 | Introduction
8 |Pushpin is our fixed positioning plugin. You can check out our live examples: the fixed Table of Contents on the right.
9 |
14 |
21 |
22 |
23 |
24 | jQuery Plugin Initialization
15 |
16 | $(document).ready(function(){
17 | $('.tabs-wrapper .row').pushpin({ top: $('.tabs-wrapper').offset().top });
18 | });
19 |
25 |
27 |
28 |
49 |
50 |
51 | jQuery Plugin Options
26 || Option Name | 30 |Description | 31 |
|---|---|
| Top | 37 |The distance in pixels from the top of the page where the element becomes fixed. (Default: 0) | 38 |
| Bottom | 41 |The distance in pixels from the top of the page where the elements stops being fixed. (Default: Infinity) | 42 |
| Offset | 45 |The offset from the top the element will be fixed at. (Default: 0) | 46 |
2 |
70 |
71 |
--------------------------------------------------------------------------------
/test/html/multiple_sidenav.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
3 |
4 |
69 |
5 |
6 |
7 |
48 |
49 |
50 |
51 |
67 |
68 |
8 |
12 |
13 |
14 |
15 | Introduction
9 |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. Check out the demo to get a better idea of it.
10 | Open Demo 11 |
16 |
23 |
24 |
25 |
26 | Parallax HTML Structure
17 |
18 | <div class="parallax-container">
19 | <div class="parallax"><img src="images/parallax1.jpg"></div>
20 | </div>
21 |
27 |
34 |
35 |
36 |
37 | Initialization
28 |
29 | $(document).ready(function(){
30 | $('.parallax').parallax();
31 | });
32 |
38 |
46 |
47 | Parallax Customization
39 |The parallax container height is what defines how much of the image can be seen. This is set to a default of 500px. You can add your own style to override this.
40 |
41 | .parallax-container {
42 | height: "your height here";
43 | }
44 |
2 |
71 |
72 |
--------------------------------------------------------------------------------
/jade/page-contents/shadow_content.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
70 |
5 |
6 |
51 |
52 |
53 |
68 |
69 |
7 |
10 |
11 | Introduction
8 |Scrollspy is a jQuery plugin that tracks certain elements and which element the user's screen is currently centered on. Our main demo of this is our table of contents on every documentation page to the right. Clicking on these links will also scroll the page to that element.
9 |
12 |
38 |
39 |
40 |
41 | Table of Contents Structure
13 |
14 | <div class="row">
15 | <div class="col s12 m9 l10">
16 | <div id="introduction" class="section scrollspy">
17 | <p>Content </p>
18 | </div>
19 |
20 | <div id="structure" class="section scrollspy">
21 | <p>Content </p>
22 | </div>
23 |
24 | <div id="initialization" class="section scrollspy">
25 | <p>Content </p>
26 | </div>
27 | </div>
28 | <div class="col hide-on-small-only m3 l2">
29 | <ul class="section table-of-contents">
30 | <li><a href="#introduction">Introduction</a></li>
31 | <li><a href="#structure">Structure</a></li>
32 | <li><a href="#initialization">Intialization</a></li>
33 | </ul>
34 | </div>
35 | </div>
36 |
42 |
49 |
50 | jQuery Plugin Initialization
43 |
44 | $(document).ready(function(){
45 | $('.scrollspy').scrollSpy();
46 | });
47 |
2 |
--------------------------------------------------------------------------------
/js/buttons.js:
--------------------------------------------------------------------------------
1 | (function ($) {
2 | $(document).ready(function() {
3 |
4 | // jQuery reverse
5 | $.fn.reverse = [].reverse;
6 |
7 | // Hover behaviour: make sure this doesn't work on .click-to-toggle FABs!
8 | $(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
9 | var $this = $(this);
10 | openFABMenu($this);
11 | });
12 | $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
13 | var $this = $(this);
14 | closeFABMenu($this);
15 | });
16 |
17 | // Toggle-on-click behaviour.
18 | $(document).on('click.fixedActionBtn', '.fixed-action-btn.click-to-toggle > a', function(e) {
19 | var $this = $(this);
20 | var $menu = $this.parent();
21 | if ($menu.hasClass('active')) {
22 | closeFABMenu($menu);
23 | } else {
24 | openFABMenu($menu);
25 | }
26 | });
27 |
28 | });
29 |
30 | $.fn.extend({
31 | openFAB: function() {
32 | openFABMenu($(this));
33 | },
34 | closeFAB: function() {
35 | closeFABMenu($(this));
36 | }
37 | });
38 |
39 |
40 | var openFABMenu = function (btn) {
41 | $this = btn;
42 | if ($this.hasClass('active') === false) {
43 |
44 | // Get direction option
45 | var horizontal = $this.hasClass('horizontal');
46 | var offsetY, offsetX;
47 |
48 | if (horizontal === true) {
49 | offsetX = 40;
50 | } else {
51 | offsetY = 40;
52 | }
53 |
54 | $this.addClass('active');
55 | $this.find('ul .btn-floating').velocity(
56 | { scaleY: ".4", scaleX: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
57 | { duration: 0 });
58 |
59 | var time = 0;
60 | $this.find('ul .btn-floating').reverse().each( function () {
61 | $(this).velocity(
62 | { opacity: "1", scaleX: "1", scaleY: "1", translateY: "0", translateX: '0'},
63 | { duration: 80, delay: time });
64 | time += 40;
65 | });
66 | }
67 | };
68 |
69 | var closeFABMenu = function (btn) {
70 | $this = btn;
71 | // Get direction option
72 | var horizontal = $this.hasClass('horizontal');
73 | var offsetY, offsetX;
74 |
75 | if (horizontal === true) {
76 | offsetX = 40;
77 | } else {
78 | offsetY = 40;
79 | }
80 |
81 | $this.removeClass('active');
82 | var time = 0;
83 | $this.find('ul .btn-floating').velocity("stop", true);
84 | $this.find('ul .btn-floating').velocity(
85 | { opacity: "0", scaleX: ".4", scaleY: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
86 | { duration: 80 }
87 | );
88 | };
89 |
90 |
91 | }( jQuery ));
92 |
--------------------------------------------------------------------------------
/sass/components/forms/_select.scss:
--------------------------------------------------------------------------------
1 | /* Select Field
2 | ========================================================================== */
3 |
4 | select { display: none; }
5 | select.browser-default { display: block; }
6 |
7 | select {
8 | background-color: $select-background;
9 | width: 100%;
10 | padding: $select-padding;
11 | border: $select-border;
12 | border-radius: $select-radius;
13 | height: $input-height;
14 | }
15 |
16 | .select-label {
17 | position: absolute;
18 | }
19 |
20 | .select-wrapper {
21 | position: relative;
22 |
23 | input.select-dropdown {
24 | position: relative;
25 | cursor: pointer;
26 | background-color: transparent;
27 | border: none;
28 | border-bottom: $input-border;
29 | outline: none;
30 | height: $input-height;
31 | line-height: $input-height;
32 | width: 100%;
33 | font-size: $input-font-size;
34 | margin: $input-margin;
35 | padding: 0;
36 | display: block;
37 | }
38 |
39 | span.caret {
40 | color: initial;
41 | position: absolute;
42 | right: 0;
43 | top: 16px;
44 | font-size: 10px;
45 | &.disabled {
46 | color: $input-disabled-color;
47 | }
48 | }
49 |
50 | & + label {
51 | position: absolute;
52 | top: -14px;
53 | font-size: $label-font-size;
54 | }
55 | }
56 |
57 | // Disabled styles
58 | select:disabled {
59 | color: rgba(0,0,0,.3);
60 | }
61 |
62 | .select-wrapper input.select-dropdown:disabled {
63 | color: rgba(0,0,0,.3);
64 | cursor: default;
65 | -webkit-user-select: none; /* webkit (safari, chrome) browsers */
66 | -moz-user-select: none; /* mozilla browsers */
67 | -ms-user-select: none; /* IE10+ */
68 | border-bottom: 1px solid rgba(0,0,0,.3);
69 | }
70 |
71 | .select-wrapper i {
72 | color: $select-disabled-color;
73 | }
74 |
75 | .select-dropdown li.disabled,
76 | .select-dropdown li.disabled > span,
77 | .select-dropdown li.optgroup {
78 | color: $select-disabled-color;
79 | background-color: transparent;
80 | }
81 |
82 | // Prefix Icons
83 | .prefix ~ .select-wrapper {
84 | margin-left: 3rem;
85 | width: 92%;
86 | width: calc(100% - 3rem);
87 | }
88 |
89 | .prefix ~ label { margin-left: 3rem; }
90 |
91 | // Icons
92 | .select-dropdown li {
93 | img {
94 | height: $dropdown-item-height - 10;
95 | width: $dropdown-item-height - 10;
96 | margin: 5px 15px;
97 | float: right;
98 | }
99 | }
100 |
101 | // Optgroup styles
102 | .select-dropdown li.optgroup {
103 | border-top: 1px solid $dropdown-hover-bg-color;
104 |
105 | &.selected > span {
106 | color: rgba(0, 0, 0, .7);
107 | }
108 |
109 | & > span {
110 | color: rgba(0, 0, 0, .4);
111 | }
112 |
113 | & ~ li.optgroup-option {
114 | padding-left: 1rem;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/jade/page-contents/pagination_content.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
64 |
5 |
6 |
48 |
49 |
62 |
63 |
7 |
47 | In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.
8 |You can easily apply this shadow effect by adding a class="z-depth-2" to an HTML tag. Alternatively you can extend any of these shadows with Sass using @extend .z-depth-2. A z-depth-0 can be used to remove shadows from elements that have z-depths by default.
10 |
29 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
30 | <div class="col s12 m2">
31 | <p class="z-depth-1">z-depth-1</p>
32 | </div>
33 | <div class="col s12 m2">
34 | <p class="z-depth-2">z-depth-2</p>
35 | </div>
36 | <div class="col s12 m2">
37 | <p class="z-depth-3">z-depth-3</p>
38 | </div>
39 | <div class="col s12 m2">
40 | <p class="z-depth-4">z-depth-4</p>
41 | </div>
42 | <div class="col s12 m2">
43 | <p class="z-depth-5">z-depth-5</p>
44 | </div>
45 |
2 |
63 |
64 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/tests/spec/tabs/tabsSpec.js:
--------------------------------------------------------------------------------
1 | describe("Tabs Plugin", function () {
2 | beforeEach(function() {
3 | loadFixtures('tabs/tabsFixture.html');
4 | $('ul.tabs').tabs();
5 | });
6 |
7 | describe("Tabs", function () {
8 | var normalTabs;
9 |
10 | beforeEach(function() {
11 | normalTabs = $('.tabs.normal');
12 | });
13 |
14 | it("should open to active tab", function () {
15 | var activeTab = normalTabs.find('.active');
16 | var activeTabHash = activeTab.attr('href');
17 | normalTabs.find('.tab a').each(function() {
18 | var tabHash = $(this).attr('href');
19 | if (tabHash === activeTabHash) {
20 | expect($(tabHash)).toBeVisible('active tab content should be visible by default');
21 | } else {
22 | expect($(tabHash)).toBeHidden('Tab content should be hidden by default');
23 | }
24 | });
25 |
26 | var indicator = normalTabs.find('.indicator');
27 | expect(indicator).toExist('Indicator should be generated');
28 | // expect(Math.abs(indicator.offset().left - activeTab.offset().left)).toBeLessThan(1, 'Indicator should be at active tab by default.');
29 | });
30 |
31 | it("should switch to clicked tab", function (done) {
32 | var activeTab = normalTabs.find('.active');
33 | var activeTabHash = activeTab.attr('href');
34 | var disabledTab = normalTabs.find('.disabled a');
35 | var disabledTabHash = disabledTab.attr('href');
36 | var firstTab = normalTabs.find('.tab a').first();
37 | var firstTabHash = firstTab.attr('href');
38 | var indicator = normalTabs.find('.indicator');
39 |
40 | expect(indicator).toExist('Indicator should be generated');
41 | // expect(Math.abs(indicator.offset().left - activeTab.offset().left)).toBeLessThan(1, 'Indicator should be at active tab by default.');
42 |
43 | disabledTab.click();
44 |
45 | setTimeout(function() {
46 | expect($(activeTabHash)).toBeVisible('Clicking disabled should not change tabs.');
47 | expect($(disabledTabHash)).toBeHidden('Clicking disabled should not change tabs.');
48 |
49 | firstTab.click();
50 |
51 | setTimeout(function() {
52 | expect($(activeTabHash)).toBeHidden('Clicking tab should switch to that tab.');
53 | expect($(firstTabHash)).toBeVisible('Clicking tab should switch to that tab.');
54 | expect(indicator.offset().left).toEqual(firstTab.offset().left, 'Indicator should move to clicked tab.');
55 | done();
56 | }, 400);
57 | }, 400);
58 |
59 | });
60 |
61 | it("should horizontally scroll when too many tabs", function () {
62 | var tabsScrollWidth = 0;
63 | normalTabs.parent().css('width', '400px');
64 | normalTabs.find('.tab').each(function() {
65 | tabsScrollWidth += $(this).width();
66 | });
67 |
68 | expect(tabsScrollWidth).toBeGreaterThan(normalTabs.width(), 'Scroll width should exceed tabs width');
69 | });
70 |
71 | });
72 | });
--------------------------------------------------------------------------------
/sass/components/_cards.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | .card-panel {
4 | transition: box-shadow .25s;
5 | padding: $card-padding;
6 | margin: $element-top-margin 0 $element-bottom-margin 0;
7 | border-radius: 2px;
8 | @extend .z-depth-1;
9 | background-color: $card-bg-color;
10 | }
11 |
12 | .card {
13 | position: relative;
14 | margin: $element-top-margin 0 $element-bottom-margin 0;
15 | background-color: $card-bg-color;
16 | transition: box-shadow .25s;
17 | border-radius: 2px;
18 | @extend .z-depth-1;
19 |
20 |
21 | .card-title {
22 | font-size: 24px;
23 | font-weight: 300;
24 | &.activator {
25 | cursor: pointer;
26 | }
27 | }
28 |
29 | // Card Sizes
30 | &.small, &.medium, &.large {
31 | position: relative;
32 |
33 | .card-image {
34 | max-height: 60%;
35 | overflow: hidden;
36 | }
37 | .card-content {
38 | max-height: 40%;
39 | overflow: hidden;
40 | }
41 | .card-action {
42 | position: absolute;
43 | bottom: 0;
44 | left: 0;
45 | right: 0;
46 | }
47 | }
48 |
49 | &.small {
50 | height: 300px;
51 | }
52 |
53 | &.medium {
54 | height: 400px;
55 | }
56 |
57 | &.large {
58 | height: 500px;
59 | }
60 |
61 |
62 | .card-image {
63 | position: relative;
64 |
65 | // Image background for content
66 | img {
67 | display: block;
68 | border-radius: 2px 2px 0 0;
69 | position: relative;
70 | left: 0;
71 | right: 0;
72 | top: 0;
73 | bottom: 0;
74 | width: 100%;
75 | }
76 |
77 | .card-title {
78 | color: $card-bg-color;
79 | position: absolute;
80 | bottom: 0;
81 | left: 0;
82 | padding: $card-padding;
83 | }
84 |
85 | }
86 |
87 | .card-content {
88 | padding: $card-padding;
89 | border-radius: 0 0 2px 2px;
90 |
91 | p {
92 | margin: 0;
93 | color: inherit;
94 | }
95 | .card-title {
96 | line-height: 48px;
97 | }
98 | }
99 |
100 | .card-action {
101 | position: relative;
102 | background-color: inherit;
103 | border-top: 1px solid rgba(160,160,160,.2);
104 | padding: $card-padding;
105 | z-index: 2;
106 |
107 | a:not(.btn):not(.btn-large):not(.btn-floating) {
108 | color: $card-link-color;
109 | margin-right: $card-padding;
110 | transition: color .3s ease;
111 | text-transform: uppercase;
112 |
113 | &:hover { color: $card-link-color-light; }
114 | }
115 |
116 | & + .card-reveal {
117 | z-index: 1;
118 | padding-bottom: 64px;
119 | }
120 | }
121 |
122 | .card-reveal {
123 | padding: $card-padding;
124 | position: absolute;
125 | background-color: $card-bg-color;
126 | width: 100%;
127 | overflow-y: auto;
128 | top: 100%;
129 | height: 100%;
130 | z-index: 3;
131 | display: none;
132 |
133 | .card-title {
134 | cursor: pointer;
135 | display: block;
136 | }
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/sass/components/_sideNav.scss:
--------------------------------------------------------------------------------
1 | .side-nav {
2 | position: fixed;
3 | width: 240px;
4 | left: 0;
5 | top: 0;
6 | margin: 0;
7 | transform: translateX(-100%);
8 | height: 100%;
9 | height: calc(100% + 60px);
10 | height: -moz-calc(100%); //Temporary Firefox Fix
11 | padding-bottom: 60px;
12 | background-color: $sidenav-bg-color;
13 | z-index: 999;
14 | backface-visibility: hidden;
15 | overflow-y: auto;
16 | will-change: transform;
17 | backface-visibility: hidden;
18 | transform: translateX(-105%);
19 |
20 | @extend .z-depth-1;
21 |
22 | // Right Align
23 | &.right-aligned {
24 | right: 0;
25 | transform: translateX(105%);
26 | left: auto;
27 | transform: translateX(100%);
28 | }
29 |
30 | .collapsible {
31 | margin: 0;
32 | }
33 |
34 |
35 | li {
36 | float: none;
37 | line-height: $sidenav-item-height;
38 |
39 | &.active { background-color: rgba(0,0,0,.05); }
40 | }
41 |
42 | a {
43 | color: $sidenav-font-color;
44 | display: block;
45 | font-size: 1rem;
46 | height: $sidenav-item-height;
47 | line-height: $sidenav-item-height;
48 | padding: 0 $sidenav-padding-right;
49 |
50 | &:hover { background-color: rgba(0,0,0,.05);}
51 |
52 | &.btn, &.btn-large, &.btn-flat, &.btn-floating {
53 | margin: 10px 15px;
54 | }
55 |
56 | &.btn,
57 | &.btn-large,
58 | &.btn-floating { color: $button-raised-color; }
59 | &.btn-flat { color: $button-flat-color; }
60 |
61 | &.btn:hover,
62 | &.btn-large:hover { background-color: lighten($button-raised-background, 5%); }
63 | &.btn-floating:hover { background-color: $button-raised-background; }
64 | }
65 | }
66 |
67 |
68 | // Touch interaction
69 | .drag-target {
70 | height: 100%;
71 | width: 10px;
72 | position: fixed;
73 | top: 0;
74 | z-index: 998;
75 | }
76 |
77 |
78 | // Hidden side-nav for all sizes
79 | .side-nav.fixed {
80 | a {
81 | display: block;
82 | padding: 0 $sidenav-padding-right;
83 | color: $sidenav-font-color;
84 | }
85 | }
86 |
87 |
88 | // Fixed side-nav shown
89 | .side-nav.fixed {
90 | left: 0;
91 | transform: translateX(0);
92 | position: fixed;
93 |
94 | // Right Align
95 | &.right-aligned {
96 | right: 0;
97 | left: auto;
98 | }
99 | }
100 |
101 | // Fixed sideNav hide on smaller
102 | @media #{$medium-and-down} {
103 | .side-nav.fixed {
104 | transform: translateX(-105%);
105 |
106 | &.right-aligned {
107 | transform: translateX(105%);
108 | }
109 | }
110 | }
111 |
112 |
113 | .side-nav .collapsible-body li.active,
114 | .side-nav.fixed .collapsible-body li.active {
115 | background-color: $primary-color;
116 | a {
117 | color: $sidenav-bg-color;
118 | }
119 | }
120 |
121 |
122 | #sidenav-overlay {
123 | position: fixed;
124 | top: 0;
125 | left: 0;
126 | right: 0;
127 |
128 | height: 120vh;
129 | background-color: rgba(0,0,0,.5);
130 | z-index: 997;
131 |
132 | will-change: opacity;
133 | }
134 |
--------------------------------------------------------------------------------
/jade/page-contents/transitions_content.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
62 |
5 |
6 |
7 |
46 |
47 |
60 |
61 |
8 |
9 |
42 |
43 |
44 |
45 |
10 |
41 |
11 |
27 |
39 |
40 | Add pagination links to help split up your long content into shorter, easier to understand blocks.
12 |Basic
13 |-
14 |
- chevron_left 15 |
- 1 16 |
- 2 17 |
- 3 18 |
- 4 19 |
- 5 20 |
- 6 21 |
- 7 22 |
- 8 23 |
- 9 24 |
- chevron_right 25 |
27 |
28 | <ul class="pagination">
29 | <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
30 | <li class="active"><a href="#!">1</a></li>
31 | <li class="waves-effect"><a href="#!">2</a></li>
32 | <li class="waves-effect"><a href="#!">3</a></li>
33 | <li class="waves-effect"><a href="#!">4</a></li>
34 | <li class="waves-effect"><a href="#!">5</a></li>
35 | <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
36 | </ul>
37 | 39 |
2 |
68 |
69 |
--------------------------------------------------------------------------------
/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))
3 |
4 |
67 |
5 |
6 |
50 |
51 |
65 |
66 |
7 |
39 |
40 | We've made some custom animation functions that will transition your content. It's recommended to use this with our ScrollFire Plugin to make your content transition in as you scroll.
8 | 9 | 10 |showStaggeredList
11 |Use this to create a staggered reveal effect for any UL Tag with list items. Just make sure the list items in the UL are opacity: 0; to ensure the animation works correctly.
14 | <a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a>
15 |
41 | 
48 |
49 | fadeInImage
42 |Use this to fade in images. It also animates grayscale and brightness to give it a unique effect.
43 | Click Me 44 |
45 | <a href="#!" class="btn" onclick="Materialize.fadeInImage('#image-test')">Click Me</a>
46 |
2 | Documentation - Materialize
7 |
8 |
9 |
10 |
11 |
13 |
14 |
30 |
31 |
33 |
35 |
37 |
39 |
41 |
43 |
45 |
47 |
49 |
51 |
53 |
55 |
57 |
59 |
61 |
63 |
65 |
67 |
69 |
71 |
73 |
75 |
77 |
79 |
81 |
83 |
85 |
87 |
89 |
91 |
93 |
95 |
97 |
99 |
101 |
103 | 104 | 105 | 106 | 107 | 108 | 109 | 120 | 121 | 122 | 123 | 124 | 125 | 138 | 139 | -------------------------------------------------------------------------------- /sass/components/forms/_range.scss: -------------------------------------------------------------------------------- 1 | /* Range 2 | ========================================================================== */ 3 | 4 | .range-field { 5 | position: relative; 6 | } 7 | 8 | input[type=range], 9 | input[type=range] + .thumb { 10 | @extend .no-select; 11 | cursor: pointer; 12 | } 13 | 14 | input[type=range] { 15 | position: relative; 16 | background-color: transparent; 17 | border: none; 18 | outline: none; 19 | width: 100%; 20 | margin: 15px 0; 21 | padding: 0; 22 | 23 | &:focus { 24 | outline: none; 25 | } 26 | } 27 | 28 | input[type=range] + .thumb { 29 | position: absolute; 30 | border: none; 31 | height: 0; 32 | width: 0; 33 | border-radius: 50%; 34 | background-color: $radio-fill-color; 35 | top: 10px; 36 | margin-left: -6px; 37 | 38 | transform-origin: 50% 50%; 39 | transform: rotate(-45deg); 40 | 41 | .value { 42 | display: block; 43 | width: 30px; 44 | text-align: center; 45 | color: $radio-fill-color; 46 | font-size: 0; 47 | transform: rotate(45deg); 48 | } 49 | 50 | &.active { 51 | border-radius: 50% 50% 50% 0; 52 | 53 | .value { 54 | color: $input-background; 55 | margin-left: -1px; 56 | margin-top: 8px; 57 | font-size: 10px; 58 | } 59 | } 60 | } 61 | 62 | // WebKit 63 | input[type=range] { 64 | -webkit-appearance: none; 65 | } 66 | 67 | input[type=range]::-webkit-slider-runnable-track { 68 | height: $track-height; 69 | background: #c2c0c2; 70 | border: none; 71 | } 72 | 73 | input[type=range]::-webkit-slider-thumb { 74 | -webkit-appearance: none; 75 | border: none; 76 | height: $range-height; 77 | width: $range-width; 78 | border-radius: 50%; 79 | background-color: $radio-fill-color; 80 | transform-origin: 50% 50%; 81 | margin: -5px 0 0 0; 82 | transition: .3s; 83 | } 84 | 85 | input[type=range]:focus::-webkit-slider-runnable-track { 86 | background: #ccc; 87 | } 88 | 89 | // FireFox 90 | input[type=range] { 91 | /* fix for FF unable to apply focus style bug */ 92 | border: 1px solid white; 93 | 94 | /*required for proper track sizing in FF*/ 95 | } 96 | 97 | input[type=range]::-moz-range-track { 98 | height: $track-height; 99 | background: #ddd; 100 | border: none; 101 | } 102 | 103 | input[type=range]::-moz-range-thumb { 104 | border: none; 105 | height: $range-height; 106 | width: $range-width; 107 | border-radius: 50%; 108 | background: $radio-fill-color; 109 | margin-top: -5px; 110 | } 111 | 112 | // hide the outline behind the border 113 | input[type=range]:-moz-focusring { 114 | outline: 1px solid #fff; 115 | outline-offset: -1px; 116 | } 117 | 118 | input[type=range]:focus::-moz-range-track { 119 | background: #ccc; 120 | } 121 | 122 | // IE 10+ 123 | input[type=range]::-ms-track { 124 | height: $track-height; 125 | 126 | // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead 127 | background: transparent; 128 | 129 | // leave room for the larger thumb to overflow with a transparent border */ 130 | border-color: transparent; 131 | border-width: 6px 0; 132 | 133 | /*remove default tick marks*/ 134 | color: transparent; 135 | } 136 | 137 | input[type=range]::-ms-fill-lower { 138 | background: #777; 139 | } 140 | 141 | input[type=range]::-ms-fill-upper { 142 | background: #ddd; 143 | } 144 | 145 | input[type=range]::-ms-thumb { 146 | border: none; 147 | height: $range-height; 148 | width: $range-width; 149 | border-radius: 50%; 150 | background: $radio-fill-color; 151 | } 152 | 153 | input[type=range]:focus::-ms-fill-lower { 154 | background: #888; 155 | } 156 | 157 | input[type=range]:focus::-ms-fill-upper { 158 | background: #ccc; 159 | } 160 | -------------------------------------------------------------------------------- /sass/components/_navbar.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | color: $navbar-font-color; 3 | @extend .z-depth-1; 4 | background-color: $primary-color; 5 | width: 100%; 6 | height: $navbar-height-mobile; 7 | line-height: $navbar-height-mobile; 8 | 9 | a { color: $navbar-font-color; } 10 | 11 | i, 12 | [class^="mdi-"], [class*="mdi-"], 13 | i.material-icons { 14 | display: block; 15 | font-size: 2rem; 16 | height: $navbar-height-mobile; 17 | line-height: $navbar-height-mobile; 18 | } 19 | 20 | .nav-wrapper { 21 | position: relative; 22 | height: 100%; 23 | } 24 | 25 | @media #{$large-and-up} { 26 | a.button-collapse { display: none; } 27 | } 28 | 29 | 30 | // Collapse button 31 | .button-collapse { 32 | float: left; 33 | position: relative; 34 | z-index: 1; 35 | height: $navbar-height-mobile; 36 | 37 | i { 38 | font-size: 2.7rem; 39 | height: $navbar-height-mobile; 40 | line-height: $navbar-height-mobile; 41 | } 42 | } 43 | 44 | 45 | // Logo 46 | .brand-logo { 47 | position: absolute; 48 | color: $navbar-font-color; 49 | display: inline-block; 50 | font-size: $navbar-brand-font-size; 51 | padding: 0; 52 | white-space: nowrap; 53 | 54 | &.center { 55 | left: 50%; 56 | transform: translateX(-50%); 57 | } 58 | 59 | @media #{$medium-and-down} { 60 | left: 50%; 61 | transform: translateX(-50%); 62 | 63 | &.left, &.right { 64 | padding: 0; 65 | transform: none; 66 | } 67 | 68 | &.left { left: 0.5rem; } 69 | &.right { 70 | right: 0.5rem; 71 | left: auto; 72 | } 73 | } 74 | 75 | &.right { 76 | right: 0.5rem; 77 | padding: 0; 78 | } 79 | } 80 | 81 | 82 | // Navbar Links 83 | ul { 84 | margin: 0; 85 | 86 | li { 87 | transition: background-color .3s; 88 | float: left; 89 | padding: 0; 90 | 91 | &.active { 92 | background-color: rgba(0,0,0,.1); 93 | } 94 | } 95 | a { 96 | transition: background-color .3s; 97 | font-size: 1rem; 98 | color: $navbar-font-color; 99 | display: inline-block; 100 | padding: 0 15px; 101 | cursor: pointer; 102 | 103 | &.btn, &.btn-large, &.btn-flat, &.btn-floating { 104 | margin-top: -2px; 105 | margin-left: 15px; 106 | margin-right: 15px; 107 | } 108 | 109 | &:hover { 110 | background-color: rgba(0,0,0,.1); 111 | } 112 | } 113 | 114 | &.left { 115 | float: left; 116 | } 117 | } 118 | 119 | // Navbar Search Form 120 | .input-field { 121 | margin: 0; 122 | 123 | input { 124 | height: 100%; 125 | font-size: 1.2rem; 126 | border: none; 127 | padding-left: 2rem; 128 | 129 | &:focus, &[type=text]:valid, &[type=password]:valid, 130 | &[type=email]:valid, &[type=url]:valid, &[type=date]:valid { 131 | border: none; 132 | box-shadow: none; 133 | } 134 | } 135 | label { 136 | top: 0; 137 | left: 0; 138 | 139 | i { 140 | color: rgba(255,255,255,.7); 141 | transition: color .3s; 142 | } 143 | &.active i { color: $navbar-font-color; } 144 | &.active { 145 | transform: translateY(0); 146 | } 147 | } 148 | 149 | } 150 | 151 | } 152 | 153 | // Fixed Navbar 154 | .navbar-fixed { 155 | position: relative; 156 | height: $navbar-height-mobile; 157 | z-index: 998; 158 | 159 | nav { 160 | position: fixed; 161 | } 162 | } 163 | @media #{$medium-and-up} { 164 | nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { 165 | height: $navbar-height; 166 | line-height: $navbar-height; 167 | } 168 | .navbar-fixed { 169 | height: $navbar-height; 170 | } 171 | } 172 | -------------------------------------------------------------------------------- /tests/spec/collapsible/collapsibleSpec.js: -------------------------------------------------------------------------------- 1 | describe( "Collapsible Plugin", function () { 2 | var collapsible, accordion; 3 | 4 | beforeEach(function() { 5 | loadFixtures('collapsible/collapsible.html'); 6 | collapsible = $('.collapsible'); 7 | accordion = $('.accordion'); 8 | popout = $('.popout'); 9 | collapsible.collapsible(); 10 | }); 11 | 12 | describe( "collapsible", function () { 13 | 14 | it("should open all items, keeping all open", function () { 15 | // Collapsible body height should be 0 on start when hidden. 16 | var headers = collapsible.find('.collapsible-header'); 17 | var bodies = collapsible.find('.collapsible-body'); 18 | 19 | bodies.each(function() { 20 | expect($(this)).toBeHidden('because collapsible bodies should be hidden initially.'); 21 | }); 22 | 23 | // Collapsible body height should be > 0 after being opened. 24 | headers.each(function() { 25 | $(this).click(); 26 | }); 27 | bodies.each(function() { 28 | expect($(this)).toBeVisible('because collapsible bodies not visible after being opened.'); 29 | }); 30 | }); 31 | }); 32 | 33 | describe( "accordion", function () { 34 | 35 | it("should open first and second items, keeping only second open", function (done) { 36 | // Collapsible body height should be 0 on start when hidden. 37 | var firstHeader = accordion.find('.collapsible-header').first(); 38 | var firstBody = accordion.find('.collapsible-body').first(); 39 | var secondHeader = accordion.find('.collapsible-header').eq(1); 40 | var secondBody = accordion.find('.collapsible-body').eq(1); 41 | expect(firstBody).toBeHidden('because accordion bodies should be hidden initially.'); 42 | expect(secondBody).toBeHidden('because accordion bodies should be hidden initially.'); 43 | 44 | // Collapsible body height should be > 0 after being opened. 45 | firstHeader.click(); 46 | 47 | setTimeout(function() { 48 | expect(firstBody).toBeVisible('because accordion bodies not visible after being opened.'); 49 | secondHeader.click(); 50 | 51 | setTimeout(function() { 52 | expect(firstBody).toBeHidden('because accordion bodies should be hidden when another item is opened.'); 53 | expect(secondBody).toBeVisible('because accordion bodies not visible after being opened.'); 54 | done(); 55 | }, 400); 56 | }, 200); 57 | 58 | }); 59 | }); 60 | 61 | describe( "popout", function () { 62 | 63 | it("should open first and popout", function (done) { 64 | // Collapsible body height should be 0 on start when hidden. 65 | var firstLi = popout.find('li').first(); 66 | var firstHeader = popout.find('.collapsible-header').first(); 67 | var firstBody = popout.find('.collapsible-body').first(); 68 | expect(firstBody).toBeHidden('because accordion bodies should be hidden initially.'); 69 | 70 | // Expect margin to be > 0 because not popped out. 71 | popout.find('li').each(function () { 72 | var marginLeft = parseInt($(this).css('margin-left')); 73 | var marginRight = parseInt($(this).css('margin-right')); 74 | expect(marginLeft).toBeGreaterThan(0, 'because closed popout items should have horizontal margins.'); 75 | expect(marginRight).toBeGreaterThan(0, 'because closed popout items should have horizontal margins.'); 76 | }); 77 | 78 | // expect margin to be 0 because popped out. 79 | firstHeader.click(); 80 | setTimeout(function() { 81 | var firstMarginLeft = parseInt(firstLi.css('margin-left')); 82 | var firstMarginRight = parseInt(firstLi.css('margin-right')); 83 | expect(firstMarginLeft).toEqual(0, 'because opened popout items should have no horizontal margins.'); 84 | expect(firstMarginRight).toEqual(0, 'because opened popout items should have no horizontal margins.'); 85 | expect(firstBody).toBeVisible('because accordion bodies not visible after being opened.'); 86 | 87 | done(); 88 | }, 400); 89 | 90 | }); 91 | }); 92 | }); 93 | --------------------------------------------------------------------------------
3 |
33 |
34 |
4 |
16 |
17 |
5 | 
6 |
7 |
6 |
8 | Card Titlemore_vert
9 |
10 |
11 |
12 | Card Titleclose
13 |
15 | Here is some more information about this product that is only revealed once clicked on.
14 |
18 |
32 |
19 |
31 |
20 | 
21 | Card Title
22 |
23 |
21 | Card Title
22 |
24 |
27 | I am a very simple card. I am good at containing small bits of information. 25 | I am convenient because I require little markup to use effectively.
26 |
28 | This is a link
29 |
30 |
35 |
--------------------------------------------------------------------------------
/sass/components/_grid.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | margin: 0 auto;
3 | max-width: 1280px;
4 | width: 90%;
5 | }
6 | @media #{$medium-and-up} {
7 | .container {
8 | width: 85%;
9 | }
10 | }
11 | @media #{$large-and-up} {
12 | .container {
13 | width: 70%;
14 | }
15 | }
16 | .container .row {
17 | margin-left: (-1 * $gutter-width / 2);
18 | margin-right: (-1 * $gutter-width / 2);
19 | }
20 |
21 | .section {
22 | padding-top: 1rem;
23 | padding-bottom: 1rem;
24 |
25 | &.no-pad {
26 | padding: 0;
27 | }
28 | &.no-pad-bot {
29 | padding-bottom: 0;
30 | }
31 | &.no-pad-top {
32 | padding-top: 0;
33 | }
34 | }
35 |
36 |
37 | .row {
38 | margin-left: auto;
39 | margin-right: auto;
40 | margin-bottom: 20px;
41 |
42 | // Clear floating children
43 | &:after {
44 | content: "";
45 | display: table;
46 | clear: both;
47 | }
48 |
49 | .col {
50 | float: left;
51 | box-sizing: border-box;
52 | padding: 0 $gutter-width / 2;
53 |
54 | &[class*="push-"],
55 | &[class*="pull-"] {
56 | position: relative;
57 | }
58 |
59 | $i: 1;
60 | @while $i <= $num-cols {
61 | $perc: unquote((100 / ($num-cols / $i)) + "%");
62 | &.s#{$i} {
63 | width: $perc;
64 | margin-left: auto;
65 | left: auto;
66 | right: auto;
67 | }
68 | $i: $i + 1;
69 | }
70 |
71 | $i: 1;
72 | @while $i <= $num-cols {
73 | $perc: unquote((100 / ($num-cols / $i)) + "%");
74 | &.offset-s#{$i} {
75 | margin-left: $perc;
76 | }
77 | &.pull-s#{$i} {
78 | right: $perc;
79 | }
80 | &.push-s#{$i} {
81 | left: $perc;
82 | }
83 | $i: $i + 1;
84 | }
85 |
86 | @media #{$medium-and-up} {
87 |
88 | $i: 1;
89 | @while $i <= $num-cols {
90 | $perc: unquote((100 / ($num-cols / $i)) + "%");
91 | &.m#{$i} {
92 | width: $perc;
93 | margin-left: auto;
94 | left: auto;
95 | right: auto;
96 | }
97 | $i: $i + 1
98 | }
99 |
100 | $i: 1;
101 | @while $i <= $num-cols {
102 | $perc: unquote((100 / ($num-cols / $i)) + "%");
103 | &.offset-m#{$i} {
104 | margin-left: $perc;
105 | }
106 | &.pull-m#{$i} {
107 | right: $perc;
108 | }
109 | &.push-m#{$i} {
110 | left: $perc;
111 | }
112 | $i: $i + 1;
113 | }
114 | }
115 |
116 | @media #{$large-and-up} {
117 |
118 | $i: 1;
119 | @while $i <= $num-cols {
120 | $perc: unquote((100 / ($num-cols / $i)) + "%");
121 | &.l#{$i} {
122 | width: $perc;
123 | margin-left: auto;
124 | left: auto;
125 | right: auto;
126 | }
127 | $i: $i + 1;
128 | }
129 |
130 | $i: 1;
131 | @while $i <= $num-cols {
132 | $perc: unquote((100 / ($num-cols / $i)) + "%");
133 | &.offset-l#{$i} {
134 | margin-left: $perc;
135 | }
136 | &.pull-l#{$i} {
137 | right: $perc;
138 | }
139 | &.push-l#{$i} {
140 | left: $perc;
141 | }
142 | $i: $i + 1;
143 | }
144 | }
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/sass/components/forms/_radio-buttons.scss:
--------------------------------------------------------------------------------
1 | /* Radio Buttons
2 | ========================================================================== */
3 |
4 | // Remove default Radio Buttons
5 | [type="radio"]:not(:checked),
6 | [type="radio"]:checked {
7 | position: absolute;
8 | left: -9999px;
9 | opacity: 0;
10 | }
11 |
12 | [type="radio"]:not(:checked) + label,
13 | [type="radio"]:checked + label {
14 | position: relative;
15 | padding-left: 35px;
16 | cursor: pointer;
17 | display: inline-block;
18 | height: 25px;
19 | line-height: 25px;
20 | font-size: 1rem;
21 | transition: .28s ease;
22 |
23 | -khtml-user-select: none; /* webkit (konqueror) browsers */
24 | user-select: none;
25 | }
26 |
27 | [type="radio"] + label:before,
28 | [type="radio"] + label:after {
29 | content: '';
30 | position: absolute;
31 | left: 0;
32 | top: 0;
33 | margin: 4px;
34 | width: 16px;
35 | height: 16px;
36 | z-index: 0;
37 | transition: .28s ease;
38 | }
39 |
40 | /* Unchecked styles */
41 | [type="radio"]:not(:checked) + label:before,
42 | [type="radio"]:not(:checked) + label:after,
43 | [type="radio"]:checked + label:before,
44 | [type="radio"]:checked + label:after,
45 | [type="radio"].with-gap:checked + label:before,
46 | [type="radio"].with-gap:checked + label:after {
47 | border-radius: 50%;
48 | }
49 |
50 | [type="radio"]:not(:checked) + label:before,
51 | [type="radio"]:not(:checked) + label:after {
52 | border: 2px solid $radio-empty-color;
53 | }
54 |
55 | [type="radio"]:not(:checked) + label:after {
56 | z-index: -1;
57 | transform: scale(0);
58 | }
59 |
60 | /* Checked styles */
61 | [type="radio"]:checked + label:before {
62 | border: 2px solid transparent;
63 | }
64 |
65 | [type="radio"]:checked + label:after,
66 | [type="radio"].with-gap:checked + label:before,
67 | [type="radio"].with-gap:checked + label:after {
68 | border: $radio-border;
69 | }
70 |
71 | [type="radio"]:checked + label:after,
72 | [type="radio"].with-gap:checked + label:after {
73 | background-color: $radio-fill-color;
74 | z-index: 0;
75 | }
76 |
77 | [type="radio"]:checked + label:after {
78 | transform: scale(1.02);
79 | }
80 |
81 | /* Radio With gap */
82 | [type="radio"].with-gap:checked + label:after {
83 | transform: scale(.5);
84 | }
85 |
86 | /* Focused styles */
87 | [type="radio"].tabbed:focus + label:before {
88 | box-shadow: 0 0 0 10px rgba(0,0,0,.1);
89 | }
90 |
91 | /* Disabled Radio With gap */
92 | [type="radio"].with-gap:disabled:checked + label:before {
93 | border: 2px solid $input-disabled-color;
94 | }
95 |
96 | [type="radio"].with-gap:disabled:checked + label:after {
97 | border: none;
98 | background-color: $input-disabled-color;
99 | }
100 |
101 | /* Disabled style */
102 | [type="radio"]:disabled:not(:checked) + label:before,
103 | [type="radio"]:disabled:checked + label:before {
104 | background-color: transparent;
105 | border-color: $input-disabled-color;
106 | }
107 |
108 | [type="radio"]:disabled + label {
109 | color: $input-disabled-color;
110 | }
111 |
112 | [type="radio"]:disabled:not(:checked) + label:before {
113 | border-color: $input-disabled-color;
114 | }
115 |
116 | [type="radio"]:disabled:checked + label:after {
117 | background-color: $input-disabled-color;
118 | border-color: $input-disabled-solid-color;
119 | }
120 |
--------------------------------------------------------------------------------
/sass/components/date_picker/_default.time.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | $BASE-TIME-PICKER
3 | ========================================================================== */
4 | /**
5 | * The list of times.
6 | */
7 | .picker__list {
8 | list-style: none;
9 | padding: 0.75em 0 4.2em;
10 | margin: 0;
11 | }
12 | /**
13 | * The times on the clock.
14 | */
15 | .picker__list-item {
16 | border-bottom: 1px solid #dddddd;
17 | border-top: 1px solid #dddddd;
18 | margin-bottom: -1px;
19 | position: relative;
20 | background: #ffffff;
21 | padding: .75em 1.25em;
22 | }
23 | @media (min-height: 46.75em) {
24 | .picker__list-item {
25 | padding: .5em 1em;
26 | }
27 | }
28 | /* Hovered time */
29 | .picker__list-item:hover {
30 | cursor: pointer;
31 | color: #000000;
32 | background: #b1dcfb;
33 | border-color: #0089ec;
34 | z-index: 10;
35 | }
36 | /* Highlighted and hovered/focused time */
37 | .picker__list-item--highlighted {
38 | border-color: #0089ec;
39 | z-index: 10;
40 | }
41 | .picker__list-item--highlighted:hover,
42 | .picker--focused .picker__list-item--highlighted {
43 | cursor: pointer;
44 | color: #000000;
45 | background: #b1dcfb;
46 | }
47 | /* Selected and hovered/focused time */
48 | .picker__list-item--selected,
49 | .picker__list-item--selected:hover,
50 | .picker--focused .picker__list-item--selected {
51 | background: #0089ec;
52 | color: #ffffff;
53 | z-index: 10;
54 | }
55 | /* Disabled time */
56 | .picker__list-item--disabled,
57 | .picker__list-item--disabled:hover,
58 | .picker--focused .picker__list-item--disabled {
59 | background: #f5f5f5;
60 | border-color: #f5f5f5;
61 | color: #dddddd;
62 | cursor: default;
63 | border-color: #dddddd;
64 | z-index: auto;
65 | }
66 | /**
67 | * The clear button
68 | */
69 | .picker--time .picker__button--clear {
70 | display: block;
71 | width: 80%;
72 | margin: 1em auto 0;
73 | padding: 1em 1.25em;
74 | background: none;
75 | border: 0;
76 | font-weight: 500;
77 | font-size: .67em;
78 | text-align: center;
79 | text-transform: uppercase;
80 | color: #666;
81 | }
82 | .picker--time .picker__button--clear:hover,
83 | .picker--time .picker__button--clear:focus {
84 | color: #000000;
85 | background: #b1dcfb;
86 | background: #ee2200;
87 | border-color: #ee2200;
88 | cursor: pointer;
89 | color: #ffffff;
90 | outline: none;
91 | }
92 | .picker--time .picker__button--clear:before {
93 | top: -0.25em;
94 | color: #666;
95 | font-size: 1.25em;
96 | font-weight: bold;
97 | }
98 | .picker--time .picker__button--clear:hover:before,
99 | .picker--time .picker__button--clear:focus:before {
100 | color: #ffffff;
101 | }
102 |
103 | /* ==========================================================================
104 | $DEFAULT-TIME-PICKER
105 | ========================================================================== */
106 | /**
107 | * The frame the bounds the time picker.
108 | */
109 | .picker--time .picker__frame {
110 | min-width: 256px;
111 | max-width: 320px;
112 | }
113 | /**
114 | * The picker box.
115 | */
116 | .picker--time .picker__box {
117 | font-size: 1em;
118 | background: #f2f2f2;
119 | padding: 0;
120 | }
121 | @media (min-height: 40.125em) {
122 | .picker--time .picker__box {
123 | margin-bottom: 5em;
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## v0.96.0 (April 1, 2015)
2 | - Toasts, transitions, scrollfire added under Materialize namespace
3 | - Dropdown is now created as a child of its parent
4 | - Collapsibles supports nesting
5 | - Modal Bottom Sheet added
6 | - Indeterminate Checkboxes added
7 | - New Checkbox Style added
8 | - Text Inputs supports placeholder/readonly
9 | - Google Inbox-like Collapsible added
10 | - Text Character Counter added
11 | - Waves no longer breaks on SVGs
12 |
13 | ## v0.95.3 (Feb 25, 2015)
14 | - Parallax image loading / responsiveness fixes
15 | - Date picker supports month/year as dropdown
16 | - Dismissable collection items
17 | - Avatar collection items
18 | - Pagination Added
19 | - ScrollFire fixes
20 |
21 |
22 | ## v0.95.2 (Feb 10, 2015)
23 | - Switches added
24 | - Transition animation functions added
25 | - ScrollFire Plugin added (fires functions dependent on scroll position)
26 | - Responsive Video tag added
27 | - Custom File Input Button added
28 | - Modals has a fixed footer option
29 | - SideNav implementation changed (needs 2 UL menus)
30 | - Slider Responsive Fixes
31 |
32 |
33 | ## v0.95.1 (Jan 26, 2015)
34 | - Sidenav Fixes
35 | - Dropdown alignment/gutter options added
36 | - Parallax fixes
37 | - JavaScript Initialization no longer needed for many components
38 | - HTML options through data-attributes
39 | - Site colors can be defined through Primary and Secondary color in Sass
40 | - Tables no longer resonsive by default
41 |
42 |
43 | ## v0.95.0 (Jan 17, 2015)
44 | - Drag Out Menu fixed with Touch Interactions
45 | - Toasts minor bugfix
46 | - OL element has default styling
47 | - Fullscreen Slider added
48 | - Footer requires page-footer class
49 | - Progress Bars added
50 | - Form autofill support added
51 | - Responsive Tables support added
52 | - Scrollspy Plugin released
53 | - Waves events are now delegated / behavior enhanced
54 |
55 |
56 | ## v0.94.0 (Dec 30, 2014)
57 | - Sidenav supports right edge positioning
58 | - Responsive Embeds
59 | - Image Vertical align classes
60 | - border-box added
61 | - Variable file created
62 | - Pushpin added
63 | - Tooltips support all directions
64 | - Layout helper classes added
65 | - Materialbox Fixes
66 | - Form Element Enhancements
67 | - Navbar supports search bar
68 | - Waves fixes
69 | - Materialbox Captions
70 | - Image Slider Fixes
71 |
72 |
73 | ## v0.93.1 (Dec 20, 2014)
74 | - Flexbox Sticky Footer removed due to IE incompatibility
75 |
76 |
77 | ## v0.93.0 (Dec 19, 2014)
78 | - Card Reveal
79 | - Image Slider
80 | - Dynamically loaded forms work correctly
81 | - Badges added
82 | - Circular Image
83 | - Waves Fixes
84 | - Footer Added
85 | - Toast support Custom HTML
86 | - Modals support programmatic opening/closing
87 | - Responsive Image support
88 |
89 |
90 | ## v0.92.1 (Dec 14, 2014)
91 | - Bower semver fix
92 | - Added new radio button style
93 |
94 |
95 | ## v0.92.0 (Dec 13, 2014)
96 | - Clicking icon in dropdown in navbar no longer closes dropdown immediately
97 | - Multiple select inputs now work properly
98 | - Mobile navbar no longer extends past screen width
99 | - Parallax improved
100 | - Modal restructured / can be opened programmatically
101 | - Callbacks added to modals
102 | - Added dist folder to repo
103 | - Cards restructured
104 |
105 | ## v0.91 (Dec 3, 2014)
106 | - bug fixes to forms
107 | - added waves color classes
108 | - toast thickened to look better on mobile
109 | - many other bug fixes
110 |
111 |
112 | ## v0.9 (Nov 30, 2014)
113 | - Touch interactions added
114 | - tons more...
--------------------------------------------------------------------------------
/tests/spec/scrollFire/scrollFireFixture.html:
--------------------------------------------------------------------------------
1 |
36 |
50 |
37 |
49 |
38 | 
39 | Card Title
40 |
41 |
39 | Card Title
40 |
42 |
44 | I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
43 |
45 | This is a link
46 | This is a link
47 |
48 |
51 |
65 |
52 |
64 |
53 |
54 | Card Title
55 |
56 |
54 | Card Title
55 |
57 |
59 | I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
58 |
60 | This is a link
61 | This is a link
62 |
63 |
66 |
80 |
67 |
79 |
68 |
69 | Card Title
70 |
71 |
69 | Card Title
70 |
72 |
74 | I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
73 |
75 | This is a link
76 | This is a link
77 |
78 | 2 | Filling up some content to enable scrolling 3 |
4 |5 | Lorem ipsum dolor sit amet, 6 | consectetur adipisicing elit, 7 | sed do eiusmod tempor incididunt 8 | ut labore et dolore magna aliqua. 9 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 10 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 11 |
12 |13 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 14 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 15 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 16 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 17 |
18 |-
19 |
-
20 |
List Item
21 |This is a description
22 |
23 | -
24 |
List Item
25 |This is a description
26 |
27 | -
28 |
List Item
29 |This is a description
30 |
31 | -
32 |
List Item
33 |This is a description
34 |
35 | -
36 |
List Item
37 |This is a description
38 |
39 | -
40 |
List Item
41 |This is a description
42 |
43 | -
44 |
List Item
45 |This is a description
46 |
47 | -
48 |
List Item
49 |This is a description
50 |
51 | -
52 |
List Item
53 |This is a description
54 |
55 | -
56 |
List Item
57 |This is a description
58 |
59 | -
60 |
List Item
61 |This is a description
62 |
63 | -
64 |
List Item
65 |This is a description
66 |
67 | -
68 |
List Item
69 |This is a description
70 |
71 | -
72 |
List Item
73 |This is a description
74 |
75 | -
76 |
List Item
77 |This is a description
78 |
79 | -
80 |
List Item
81 |This is a description
82 |
83 | -
84 |
List Item
85 |This is the element right above the scroll zone
86 |
87 |
-
89 |
-
90 |
Test List Item
91 |This is a description
92 |
93 | -
94 |
Test List Item
95 |This is a description
96 |
97 | -
98 |
Test List Item
99 |This is a description
100 |
101 | -
102 |
Test List Item
103 |This is a description
104 |
105 | -
106 |
Test List Item
107 |This is a description
108 |
109 |
Testing
32 |33 |
Testing
34 |35 |
Testing
36 |37 |
Testing
38 |39 |
Testing
40 |41 |
Testing
42 |43 |
Testing
44 |45 |
Testing
46 |47 |
Testing
48 |49 |
Testing
50 |51 |
Testing
52 |53 |
Testing
54 |55 |
Testing
56 |57 |
Testing
58 |59 |
Testing
60 |61 |
Testing
62 |63 |
Testing
64 |65 |
Testing
66 |67 |
Testing
68 |69 |
Testing
70 |71 |
Testing
72 |73 |
Testing
74 |75 |
Testing
76 |77 |
Testing
78 |79 |
Testing
80 |81 |
Testing
82 |83 |
Testing
84 |85 |
Testing
86 |87 |
Testing
88 |89 |
Testing
90 |91 |
Testing
92 |93 |
Testing
94 |95 |
Testing
96 |97 |
Testing
98 |99 |
Testing
100 |101 |
Testing
102 |103 | 104 | 105 | 106 | 107 | 108 | 109 | 120 | 121 | 122 | 123 | 124 | 125 | 138 | 139 | -------------------------------------------------------------------------------- /sass/components/forms/_range.scss: -------------------------------------------------------------------------------- 1 | /* Range 2 | ========================================================================== */ 3 | 4 | .range-field { 5 | position: relative; 6 | } 7 | 8 | input[type=range], 9 | input[type=range] + .thumb { 10 | @extend .no-select; 11 | cursor: pointer; 12 | } 13 | 14 | input[type=range] { 15 | position: relative; 16 | background-color: transparent; 17 | border: none; 18 | outline: none; 19 | width: 100%; 20 | margin: 15px 0; 21 | padding: 0; 22 | 23 | &:focus { 24 | outline: none; 25 | } 26 | } 27 | 28 | input[type=range] + .thumb { 29 | position: absolute; 30 | border: none; 31 | height: 0; 32 | width: 0; 33 | border-radius: 50%; 34 | background-color: $radio-fill-color; 35 | top: 10px; 36 | margin-left: -6px; 37 | 38 | transform-origin: 50% 50%; 39 | transform: rotate(-45deg); 40 | 41 | .value { 42 | display: block; 43 | width: 30px; 44 | text-align: center; 45 | color: $radio-fill-color; 46 | font-size: 0; 47 | transform: rotate(45deg); 48 | } 49 | 50 | &.active { 51 | border-radius: 50% 50% 50% 0; 52 | 53 | .value { 54 | color: $input-background; 55 | margin-left: -1px; 56 | margin-top: 8px; 57 | font-size: 10px; 58 | } 59 | } 60 | } 61 | 62 | // WebKit 63 | input[type=range] { 64 | -webkit-appearance: none; 65 | } 66 | 67 | input[type=range]::-webkit-slider-runnable-track { 68 | height: $track-height; 69 | background: #c2c0c2; 70 | border: none; 71 | } 72 | 73 | input[type=range]::-webkit-slider-thumb { 74 | -webkit-appearance: none; 75 | border: none; 76 | height: $range-height; 77 | width: $range-width; 78 | border-radius: 50%; 79 | background-color: $radio-fill-color; 80 | transform-origin: 50% 50%; 81 | margin: -5px 0 0 0; 82 | transition: .3s; 83 | } 84 | 85 | input[type=range]:focus::-webkit-slider-runnable-track { 86 | background: #ccc; 87 | } 88 | 89 | // FireFox 90 | input[type=range] { 91 | /* fix for FF unable to apply focus style bug */ 92 | border: 1px solid white; 93 | 94 | /*required for proper track sizing in FF*/ 95 | } 96 | 97 | input[type=range]::-moz-range-track { 98 | height: $track-height; 99 | background: #ddd; 100 | border: none; 101 | } 102 | 103 | input[type=range]::-moz-range-thumb { 104 | border: none; 105 | height: $range-height; 106 | width: $range-width; 107 | border-radius: 50%; 108 | background: $radio-fill-color; 109 | margin-top: -5px; 110 | } 111 | 112 | // hide the outline behind the border 113 | input[type=range]:-moz-focusring { 114 | outline: 1px solid #fff; 115 | outline-offset: -1px; 116 | } 117 | 118 | input[type=range]:focus::-moz-range-track { 119 | background: #ccc; 120 | } 121 | 122 | // IE 10+ 123 | input[type=range]::-ms-track { 124 | height: $track-height; 125 | 126 | // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead 127 | background: transparent; 128 | 129 | // leave room for the larger thumb to overflow with a transparent border */ 130 | border-color: transparent; 131 | border-width: 6px 0; 132 | 133 | /*remove default tick marks*/ 134 | color: transparent; 135 | } 136 | 137 | input[type=range]::-ms-fill-lower { 138 | background: #777; 139 | } 140 | 141 | input[type=range]::-ms-fill-upper { 142 | background: #ddd; 143 | } 144 | 145 | input[type=range]::-ms-thumb { 146 | border: none; 147 | height: $range-height; 148 | width: $range-width; 149 | border-radius: 50%; 150 | background: $radio-fill-color; 151 | } 152 | 153 | input[type=range]:focus::-ms-fill-lower { 154 | background: #888; 155 | } 156 | 157 | input[type=range]:focus::-ms-fill-upper { 158 | background: #ccc; 159 | } 160 | -------------------------------------------------------------------------------- /sass/components/_navbar.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | color: $navbar-font-color; 3 | @extend .z-depth-1; 4 | background-color: $primary-color; 5 | width: 100%; 6 | height: $navbar-height-mobile; 7 | line-height: $navbar-height-mobile; 8 | 9 | a { color: $navbar-font-color; } 10 | 11 | i, 12 | [class^="mdi-"], [class*="mdi-"], 13 | i.material-icons { 14 | display: block; 15 | font-size: 2rem; 16 | height: $navbar-height-mobile; 17 | line-height: $navbar-height-mobile; 18 | } 19 | 20 | .nav-wrapper { 21 | position: relative; 22 | height: 100%; 23 | } 24 | 25 | @media #{$large-and-up} { 26 | a.button-collapse { display: none; } 27 | } 28 | 29 | 30 | // Collapse button 31 | .button-collapse { 32 | float: left; 33 | position: relative; 34 | z-index: 1; 35 | height: $navbar-height-mobile; 36 | 37 | i { 38 | font-size: 2.7rem; 39 | height: $navbar-height-mobile; 40 | line-height: $navbar-height-mobile; 41 | } 42 | } 43 | 44 | 45 | // Logo 46 | .brand-logo { 47 | position: absolute; 48 | color: $navbar-font-color; 49 | display: inline-block; 50 | font-size: $navbar-brand-font-size; 51 | padding: 0; 52 | white-space: nowrap; 53 | 54 | &.center { 55 | left: 50%; 56 | transform: translateX(-50%); 57 | } 58 | 59 | @media #{$medium-and-down} { 60 | left: 50%; 61 | transform: translateX(-50%); 62 | 63 | &.left, &.right { 64 | padding: 0; 65 | transform: none; 66 | } 67 | 68 | &.left { left: 0.5rem; } 69 | &.right { 70 | right: 0.5rem; 71 | left: auto; 72 | } 73 | } 74 | 75 | &.right { 76 | right: 0.5rem; 77 | padding: 0; 78 | } 79 | } 80 | 81 | 82 | // Navbar Links 83 | ul { 84 | margin: 0; 85 | 86 | li { 87 | transition: background-color .3s; 88 | float: left; 89 | padding: 0; 90 | 91 | &.active { 92 | background-color: rgba(0,0,0,.1); 93 | } 94 | } 95 | a { 96 | transition: background-color .3s; 97 | font-size: 1rem; 98 | color: $navbar-font-color; 99 | display: inline-block; 100 | padding: 0 15px; 101 | cursor: pointer; 102 | 103 | &.btn, &.btn-large, &.btn-flat, &.btn-floating { 104 | margin-top: -2px; 105 | margin-left: 15px; 106 | margin-right: 15px; 107 | } 108 | 109 | &:hover { 110 | background-color: rgba(0,0,0,.1); 111 | } 112 | } 113 | 114 | &.left { 115 | float: left; 116 | } 117 | } 118 | 119 | // Navbar Search Form 120 | .input-field { 121 | margin: 0; 122 | 123 | input { 124 | height: 100%; 125 | font-size: 1.2rem; 126 | border: none; 127 | padding-left: 2rem; 128 | 129 | &:focus, &[type=text]:valid, &[type=password]:valid, 130 | &[type=email]:valid, &[type=url]:valid, &[type=date]:valid { 131 | border: none; 132 | box-shadow: none; 133 | } 134 | } 135 | label { 136 | top: 0; 137 | left: 0; 138 | 139 | i { 140 | color: rgba(255,255,255,.7); 141 | transition: color .3s; 142 | } 143 | &.active i { color: $navbar-font-color; } 144 | &.active { 145 | transform: translateY(0); 146 | } 147 | } 148 | 149 | } 150 | 151 | } 152 | 153 | // Fixed Navbar 154 | .navbar-fixed { 155 | position: relative; 156 | height: $navbar-height-mobile; 157 | z-index: 998; 158 | 159 | nav { 160 | position: fixed; 161 | } 162 | } 163 | @media #{$medium-and-up} { 164 | nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { 165 | height: $navbar-height; 166 | line-height: $navbar-height; 167 | } 168 | .navbar-fixed { 169 | height: $navbar-height; 170 | } 171 | } 172 | -------------------------------------------------------------------------------- /tests/spec/collapsible/collapsibleSpec.js: -------------------------------------------------------------------------------- 1 | describe( "Collapsible Plugin", function () { 2 | var collapsible, accordion; 3 | 4 | beforeEach(function() { 5 | loadFixtures('collapsible/collapsible.html'); 6 | collapsible = $('.collapsible'); 7 | accordion = $('.accordion'); 8 | popout = $('.popout'); 9 | collapsible.collapsible(); 10 | }); 11 | 12 | describe( "collapsible", function () { 13 | 14 | it("should open all items, keeping all open", function () { 15 | // Collapsible body height should be 0 on start when hidden. 16 | var headers = collapsible.find('.collapsible-header'); 17 | var bodies = collapsible.find('.collapsible-body'); 18 | 19 | bodies.each(function() { 20 | expect($(this)).toBeHidden('because collapsible bodies should be hidden initially.'); 21 | }); 22 | 23 | // Collapsible body height should be > 0 after being opened. 24 | headers.each(function() { 25 | $(this).click(); 26 | }); 27 | bodies.each(function() { 28 | expect($(this)).toBeVisible('because collapsible bodies not visible after being opened.'); 29 | }); 30 | }); 31 | }); 32 | 33 | describe( "accordion", function () { 34 | 35 | it("should open first and second items, keeping only second open", function (done) { 36 | // Collapsible body height should be 0 on start when hidden. 37 | var firstHeader = accordion.find('.collapsible-header').first(); 38 | var firstBody = accordion.find('.collapsible-body').first(); 39 | var secondHeader = accordion.find('.collapsible-header').eq(1); 40 | var secondBody = accordion.find('.collapsible-body').eq(1); 41 | expect(firstBody).toBeHidden('because accordion bodies should be hidden initially.'); 42 | expect(secondBody).toBeHidden('because accordion bodies should be hidden initially.'); 43 | 44 | // Collapsible body height should be > 0 after being opened. 45 | firstHeader.click(); 46 | 47 | setTimeout(function() { 48 | expect(firstBody).toBeVisible('because accordion bodies not visible after being opened.'); 49 | secondHeader.click(); 50 | 51 | setTimeout(function() { 52 | expect(firstBody).toBeHidden('because accordion bodies should be hidden when another item is opened.'); 53 | expect(secondBody).toBeVisible('because accordion bodies not visible after being opened.'); 54 | done(); 55 | }, 400); 56 | }, 200); 57 | 58 | }); 59 | }); 60 | 61 | describe( "popout", function () { 62 | 63 | it("should open first and popout", function (done) { 64 | // Collapsible body height should be 0 on start when hidden. 65 | var firstLi = popout.find('li').first(); 66 | var firstHeader = popout.find('.collapsible-header').first(); 67 | var firstBody = popout.find('.collapsible-body').first(); 68 | expect(firstBody).toBeHidden('because accordion bodies should be hidden initially.'); 69 | 70 | // Expect margin to be > 0 because not popped out. 71 | popout.find('li').each(function () { 72 | var marginLeft = parseInt($(this).css('margin-left')); 73 | var marginRight = parseInt($(this).css('margin-right')); 74 | expect(marginLeft).toBeGreaterThan(0, 'because closed popout items should have horizontal margins.'); 75 | expect(marginRight).toBeGreaterThan(0, 'because closed popout items should have horizontal margins.'); 76 | }); 77 | 78 | // expect margin to be 0 because popped out. 79 | firstHeader.click(); 80 | setTimeout(function() { 81 | var firstMarginLeft = parseInt(firstLi.css('margin-left')); 82 | var firstMarginRight = parseInt(firstLi.css('margin-right')); 83 | expect(firstMarginLeft).toEqual(0, 'because opened popout items should have no horizontal margins.'); 84 | expect(firstMarginRight).toEqual(0, 'because opened popout items should have no horizontal margins.'); 85 | expect(firstBody).toBeVisible('because accordion bodies not visible after being opened.'); 86 | 87 | done(); 88 | }, 400); 89 | 90 | }); 91 | }); 92 | }); 93 | --------------------------------------------------------------------------------