materialize-sass 0.96.2 → 0.97.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +15 -0
  3. data/app/assets/javascripts/materialize.js +6158 -4
  4. data/app/assets/javascripts/materialize/buttons.js +37 -11
  5. data/app/assets/javascripts/materialize/character_counter.js +3 -3
  6. data/app/assets/javascripts/materialize/dropdown.js +4 -2
  7. data/app/assets/javascripts/materialize/forms.js +81 -32
  8. data/app/assets/javascripts/materialize/init.js +1 -1
  9. data/app/assets/javascripts/materialize/leanModal.js +34 -20
  10. data/app/assets/javascripts/materialize/sideNav.js +1 -1
  11. data/app/assets/javascripts/materialize/slider.js +10 -18
  12. data/app/assets/javascripts/materialize/transitions.js +10 -1
  13. data/app/assets/stylesheets/materialize/components/_buttons.scss +4 -4
  14. data/app/assets/stylesheets/materialize/components/_cards.scss +6 -4
  15. data/app/assets/stylesheets/materialize/components/_collapsible.scss +1 -1
  16. data/app/assets/stylesheets/materialize/components/_color.scss +1 -1
  17. data/app/assets/stylesheets/materialize/components/_dropdown.scss +2 -2
  18. data/app/assets/stylesheets/materialize/components/_form.scss +12 -13
  19. data/app/assets/stylesheets/materialize/components/_global.scss +33 -4
  20. data/app/assets/stylesheets/materialize/components/_grid.scss +0 -1
  21. data/app/assets/stylesheets/materialize/components/_modal.scss +3 -4
  22. data/app/assets/stylesheets/materialize/components/_navbar.scss +1 -1
  23. data/app/assets/stylesheets/materialize/components/_sideNav.scss +5 -5
  24. data/app/assets/stylesheets/materialize/components/_slider.scss +4 -4
  25. data/app/assets/stylesheets/materialize/components/_typography.scss +14 -10
  26. data/app/assets/stylesheets/materialize/components/_variables.scss +15 -7
  27. data/lib/materialize-sass/engine.rb +2 -2
  28. data/lib/materialize-sass/version.rb +1 -1
  29. metadata +3 -3
@@ -10,7 +10,6 @@
10
10
  interval: 6000
11
11
  };
12
12
  options = $.extend(defaults, options);
13
- console.log(options);
14
13
 
15
14
  return this.each(function() {
16
15
 
@@ -73,16 +72,18 @@
73
72
  }
74
73
  }
75
74
 
76
- console.log(options.height);
77
75
  // Set height of slider
78
- if (options.indicators) {
79
- // Add height if indicators are present
80
- $this.height(options.height + 40);
81
- }
82
- else {
83
- $this.height(options.height);
76
+ // If fullscreen, do nothing
77
+ if (!$this.hasClass('fullscreen')) {
78
+ if (options.indicators) {
79
+ // Add height if indicators are present
80
+ $this.height(options.height + 40);
81
+ }
82
+ else {
83
+ $this.height(options.height);
84
+ }
85
+ $slider.height(options.height);
84
86
  }
85
- $slider.height(options.height);
86
87
 
87
88
 
88
89
  // Set initial positions of captions
@@ -90,15 +91,6 @@
90
91
  captionTransition($(this), 0);
91
92
  });
92
93
 
93
- // Set initial dimensions of images
94
- // $slides.find('img').each(function () {
95
- // $(this).load(function () {
96
- // if ($(this).width() < $(this).parent().width()) {
97
- // $(this).css({width: '100%', height: 'auto'});
98
- // }
99
- // });
100
- // });
101
-
102
94
  // Move img src into background-image
103
95
  $slides.find('img').each(function () {
104
96
  $(this).css('background-image', 'url(' + $(this).attr('src') + ')' );
@@ -66,6 +66,8 @@
66
66
  var swipeLeft = false;
67
67
  var swipeRight = false;
68
68
 
69
+
70
+ // Dismissible Collections
69
71
  $('.dismissable').each(function() {
70
72
  $(this).hammer({
71
73
  prevent_default: false
@@ -83,12 +85,19 @@
83
85
  if (direction === 4 && (x > ($this.innerWidth() / 2) || velocityX < -0.75)) {
84
86
  swipeLeft = true;
85
87
  }
88
+
86
89
  // Swipe Right
87
- else if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.75)) {
90
+ if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.75)) {
88
91
  swipeRight = true;
89
92
  }
90
93
  }
91
94
  }).bind('panend', function(e) {
95
+ // Reset if collection is moved back into original position
96
+ if (Math.abs(e.gesture.deltaX) < ($(this).innerWidth() / 2)) {
97
+ swipeRight = false;
98
+ swipeLeft = false;
99
+ }
100
+
92
101
  if (e.gesture.pointerType === "touch") {
93
102
  var $this = $(this);
94
103
  if (swipeLeft || swipeRight) {
@@ -15,9 +15,9 @@
15
15
  }
16
16
  // Disabled shared style
17
17
  .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .btn-floating:disabled {
18
- background-color: $button-bg-color-disabled;
18
+ background-color: $button-bg-color-disabled !important;
19
19
  box-shadow: none;
20
- color: $button-color-disabled;
20
+ color: $button-color-disabled !important;
21
21
  cursor: default;
22
22
  * {
23
23
  pointer-events: none;
@@ -76,7 +76,7 @@
76
76
  display: inline-block;
77
77
  text-align: center;
78
78
  color: $button-color-raised;
79
- font-size: 1.6rem;
79
+ font-size: $button-large-icon-font-size;
80
80
  line-height: $button-floating-size;
81
81
  }
82
82
 
@@ -147,7 +147,7 @@ button.btn-floating {
147
147
  line-height: 56px;
148
148
 
149
149
  i {
150
- font-size: 1.6rem;
150
+ font-size: $button-large-icon-font-size;
151
151
  }
152
152
  }
153
153
 
@@ -1,6 +1,7 @@
1
1
 
2
2
 
3
3
  .card-panel {
4
+ transition: box-shadow .25s;
4
5
  padding: $card-padding;
5
6
  margin: $element-top-margin 0 $element-bottom-margin 0;
6
7
  border-radius: 2px;
@@ -13,12 +14,13 @@
13
14
  overflow: hidden;
14
15
  margin: $element-top-margin 0 $element-bottom-margin 0;
15
16
  background-color: $card-bg-color;
17
+ transition: box-shadow .25s;
16
18
  border-radius: 2px;
17
19
  @extend .z-depth-1;
18
20
 
19
21
 
20
22
  .card-title {
21
- color: #fff;
23
+ color: $card-bg-color;
22
24
  font-size: 24px;
23
25
  font-weight: 300;
24
26
  &.activator {
@@ -121,19 +123,19 @@
121
123
  padding: $card-padding;
122
124
 
123
125
  a {
124
- color: color("orange", "accent-2");
126
+ color: $card-link-color;
125
127
  margin-right: $card-padding;
126
128
  @include transition(color .3s ease);
127
129
  text-transform: uppercase;
128
130
 
129
- &:hover { color: lighten(color("orange", "accent-2"), 20%); }
131
+ &:hover { color: $card-link-color-light; }
130
132
  }
131
133
  }
132
134
 
133
135
  .card-reveal {
134
136
  padding: $card-padding;
135
137
  position: absolute;
136
- background-color: #FFF;
138
+ background-color: $card-bg-color;
137
139
  width: 100%;
138
140
  overflow-y: auto;
139
141
  top: 100%;
@@ -59,7 +59,7 @@
59
59
 
60
60
  .collapsible-body {
61
61
  border: 0;
62
- background-color: #FFF;
62
+ background-color: $collapsible-header-color;
63
63
 
64
64
  li a { margin: 0 1rem 0 2rem; }
65
65
  }
@@ -406,7 +406,7 @@ $colors: (
406
406
  @return map-get($curr_color, $type);
407
407
  }
408
408
  }
409
- @warn "Unknown `#{name}` in $colors.";
409
+ @warn "Unknown `#{$color} #{$type}` in $colors.";
410
410
  @return null;
411
411
  }
412
412
 
@@ -1,6 +1,6 @@
1
1
  .dropdown-content {
2
2
  @extend .z-depth-1;
3
- background-color: #FFFFFF;
3
+ background-color: $dropdown-bg-color;
4
4
  margin: 0;
5
5
  display: none;
6
6
  min-width: 100px;
@@ -21,7 +21,7 @@
21
21
  text-transform: none;
22
22
 
23
23
  &:hover, &.active {
24
- background-color: #eee;
24
+ background-color: $dropdown-hover-bg-color;
25
25
  }
26
26
 
27
27
  & > a, & > span {
@@ -181,7 +181,7 @@ textarea.materialize-textarea {
181
181
  width: calc(100% - 4rem);
182
182
 
183
183
  &:focus {
184
- background-color: #FFF;
184
+ background-color: $input-bg-color;
185
185
  border: 0;
186
186
  box-shadow: none;
187
187
  color: #444;
@@ -494,8 +494,8 @@ form p:last-child {
494
494
  height: 13px;
495
495
  border-top: 2px solid transparent;
496
496
  border-left: 2px solid transparent;
497
- border-right: 2px solid #fff;
498
- border-bottom: 2px solid #fff;
497
+ border-right: 2px solid $input-bg-color;
498
+ border-bottom: 2px solid $input-bg-color;
499
499
  -webkit-transform: rotateZ(37deg);
500
500
  transform: rotateZ(37deg);
501
501
 
@@ -633,12 +633,12 @@ input[type=checkbox]:not(:disabled) ~ .lever:active:after {
633
633
  padding: 0;
634
634
  display: block;
635
635
  }
636
- .mdi-navigation-arrow-drop-down {
636
+ span.caret {
637
637
  color: initial;
638
638
  position: absolute;
639
639
  right: 0;
640
- top: 0;
641
- font-size: 23px;
640
+ top: 16px;
641
+ font-size: 10px;
642
642
  &.disabled {
643
643
  color: $input-disabled-color;
644
644
  }
@@ -681,15 +681,14 @@ select:disabled {
681
681
  .file-field {
682
682
  position: relative;
683
683
 
684
- input.file-path {
685
- margin-left: 100px;
686
- width: calc(100% - 100px);
684
+ .file-path-wrapper {
685
+ overflow: hidden;
686
+ padding-left: 10px;
687
687
  }
688
+ input.file-path { width: 100%; }
688
689
 
689
690
  .btn {
690
- position: absolute;
691
- top: 0;
692
- left: 0;
691
+ float: left;
693
692
  height: 3rem;
694
693
  line-height: 3rem;
695
694
  }
@@ -764,7 +763,7 @@ input[type=range] + .thumb {
764
763
  border-radius: 50% 50% 50% 0;
765
764
 
766
765
  .value {
767
- color: #fff;
766
+ color: $input-bg-color;
768
767
  margin-left: -1px;
769
768
  margin-top: 8px;
770
769
  font-size: 10px;
@@ -80,6 +80,11 @@ ul {
80
80
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
81
81
  }
82
82
 
83
+ .hoverable:hover {
84
+ transition: box-shadow .25s;
85
+ box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
86
+ }
87
+
83
88
  // Dividers
84
89
 
85
90
  .divider {
@@ -137,11 +142,10 @@ video.responsive-video {
137
142
  .pagination {
138
143
 
139
144
  li {
140
- font-size: 1.2rem;
141
145
  float: left;
142
- padding: 0 5px;
146
+ font-size: 1.2rem;
147
+ padding: 0 10px;
143
148
  line-height: 30px;
144
- margin: 0 5px;
145
149
  border-radius: 2px;
146
150
  text-align: center;
147
151
 
@@ -160,6 +164,28 @@ video.responsive-video {
160
164
  font-size: 2rem;
161
165
  }
162
166
  }
167
+
168
+
169
+ li.pages ul li {
170
+ display: inline-block;
171
+ float: none;
172
+ }
173
+ }
174
+ @media #{$medium-and-down} {
175
+ .pagination {
176
+ width: 100%;
177
+
178
+ li.prev,
179
+ li.next {
180
+ width: 10%;
181
+ }
182
+
183
+ li.pages {
184
+ width: 80%;
185
+ overflow: hidden;
186
+ white-space: nowrap;
187
+ }
188
+ }
163
189
  }
164
190
 
165
191
 
@@ -497,7 +523,10 @@ td, th{
497
523
  padding: 10px 20px;
498
524
  }
499
525
  .collection-item {
500
- padding-left: 30px;
526
+ padding-left: 30px;
527
+ }
528
+ .collection-item.avatar {
529
+ padding-left: 72px;
501
530
  }
502
531
  }
503
532
 
@@ -1,5 +1,4 @@
1
1
  .container {
2
- padding: 0 $gutter-width;
3
2
  margin: 0 auto;
4
3
  max-width: 1280px;
5
4
  width: 90%;
@@ -13,7 +13,6 @@
13
13
  overflow-y: auto;
14
14
 
15
15
  border-radius: 2px;
16
- @include transform(translate(0));
17
16
  will-change: top, opacity;
18
17
 
19
18
  @media #{$medium-and-down} {
@@ -65,16 +64,16 @@
65
64
  height: 70%;
66
65
 
67
66
  .modal-content {
68
- position: fixed;
67
+ position: absolute;
68
+ height: calc(100% - 56px);
69
69
  max-height: 100%;
70
- padding-bottom: 64px;
71
70
  width: 100%;
72
71
  overflow-y: auto;
73
72
  }
74
73
 
75
74
  .modal-footer {
76
75
  border-top: 1px solid rgba(0,0,0,.1);
77
- position: fixed;
76
+ position: absolute;
78
77
  bottom: 0;
79
78
  }
80
79
  }
@@ -113,7 +113,7 @@ nav {
113
113
  color: rgba(255,255,255,.7);
114
114
  @include transition(color .3s);
115
115
  }
116
- &.active i { color: #fff; }
116
+ &.active i { color: $navbar-font-color; }
117
117
  &.active {
118
118
  @include transform(translateY(0));
119
119
  }
@@ -8,7 +8,7 @@
8
8
  height: calc(100% + 60px);
9
9
  height: -moz-calc(100%); //Temporary Firefox Fix
10
10
  padding-bottom: 60px;
11
- background-color: #FFF;
11
+ background-color: $sidenav-bg-color;
12
12
  z-index: 999;
13
13
  overflow-y: auto;
14
14
 
@@ -29,7 +29,7 @@
29
29
 
30
30
  li {
31
31
  float: none;
32
- padding: 0 15px;
32
+ padding: 0 $sidenav-padding-right;
33
33
  &:hover, &.active { background-color: #ddd; }
34
34
  }
35
35
  a {
@@ -38,7 +38,7 @@
38
38
  font-size: 1rem;
39
39
  height: 64px;
40
40
  line-height: 64px;
41
- padding: 0 15px;
41
+ padding: 0 $sidenav-padding-right;
42
42
  }
43
43
  }
44
44
 
@@ -57,7 +57,7 @@
57
57
  .side-nav.fixed {
58
58
  a {
59
59
  display: block;
60
- padding: 0 15px;
60
+ padding: 0 $sidenav-padding-right;
61
61
  color: #444;
62
62
  }
63
63
  }
@@ -92,7 +92,7 @@
92
92
  .side-nav.fixed .collapsible-body li.active {
93
93
  background-color: $primary-color;
94
94
  a {
95
- color: #fff;
95
+ color: $sidenav-bg-color;
96
96
  }
97
97
  }
98
98
 
@@ -24,7 +24,7 @@
24
24
  }
25
25
 
26
26
  .slides {
27
- background-color: color('grey', 'base');
27
+ background-color: $slider-bg-color;
28
28
  margin: 0;
29
29
  height: 400px;
30
30
 
@@ -53,7 +53,7 @@
53
53
  width: 70%;
54
54
  opacity: 0;
55
55
 
56
- p { color: color('grey', 'lighten-2'); }
56
+ p { color: $slider-bg-color-light; }
57
57
  }
58
58
 
59
59
  &.active {
@@ -78,13 +78,13 @@
78
78
  height: 16px;
79
79
  width: 16px;
80
80
  margin: 0 12px;
81
- background-color: color('grey', 'lighten-2');
81
+ background-color: $slider-bg-color-light;
82
82
 
83
83
  @include transition(background-color .3s);
84
84
  border-radius: 50%;
85
85
 
86
86
  &.active {
87
- background-color: color('green', 'base');
87
+ background-color: $slider-indicator-color;
88
88
  }
89
89
  }
90
90
  }
@@ -4,19 +4,19 @@ a {
4
4
 
5
5
  html{
6
6
  line-height: 1.5;
7
-
7
+
8
8
  @media only screen and (min-width: 0) {
9
9
  font-size: 14px;
10
10
  }
11
-
11
+
12
12
  @media only screen and (min-width: $medium-screen) {
13
13
  font-size: 14.5px;
14
14
  }
15
-
15
+
16
16
  @media only screen and (min-width: $large-screen) {
17
17
  font-size: 15px;
18
18
  }
19
-
19
+
20
20
  font-family: "Roboto", sans-serif;
21
21
  font-weight: normal;
22
22
  color: $off-black;
@@ -28,12 +28,12 @@ h1, h2, h3, h4, h5, h6 {
28
28
 
29
29
  // Header Styles
30
30
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
31
- h1 { font-size: $h1-fontsize; line-height: 1.1*$h1-fontsize; margin: ($h1-fontsize / 2) 0 ($h1-fontsize / 2.5) 0;}
32
- h2 { font-size: $h2-fontsize; line-height: 1.1*$h2-fontsize; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;}
33
- h3 { font-size: $h3-fontsize; line-height: 1.1*$h3-fontsize; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;}
34
- h4 { font-size: $h4-fontsize; line-height: 1.1*$h4-fontsize; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;}
35
- h5 { font-size: $h5-fontsize; line-height: 1.1*$h5-fontsize; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;}
36
- h6 { font-size: $h6-fontsize; line-height: 1.1*$h6-fontsize; margin: ($h6-fontsize / 2) 0 ($h6-fontsize / 2.5) 0;}
31
+ h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 2) 0 ($h1-fontsize / 2.5) 0;}
32
+ h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;}
33
+ h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;}
34
+ h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;}
35
+ h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;}
36
+ h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 2) 0 ($h6-fontsize / 2.5) 0;}
37
37
 
38
38
  // Text Styles
39
39
  em { font-style: italic; }
@@ -51,4 +51,8 @@ small { font-size: 75%; }
51
51
  }
52
52
  $i: $i + 1;
53
53
  }
54
+ // Handle below 360px screen
55
+ @media only screen and (max-width: 360px) {
56
+ font-size: 1.2rem;
57
+ }
54
58
  }