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.
- checksums.yaml +4 -4
- data/README.md +15 -0
- data/app/assets/javascripts/materialize.js +6158 -4
- data/app/assets/javascripts/materialize/buttons.js +37 -11
- data/app/assets/javascripts/materialize/character_counter.js +3 -3
- data/app/assets/javascripts/materialize/dropdown.js +4 -2
- data/app/assets/javascripts/materialize/forms.js +81 -32
- data/app/assets/javascripts/materialize/init.js +1 -1
- data/app/assets/javascripts/materialize/leanModal.js +34 -20
- data/app/assets/javascripts/materialize/sideNav.js +1 -1
- data/app/assets/javascripts/materialize/slider.js +10 -18
- data/app/assets/javascripts/materialize/transitions.js +10 -1
- data/app/assets/stylesheets/materialize/components/_buttons.scss +4 -4
- data/app/assets/stylesheets/materialize/components/_cards.scss +6 -4
- data/app/assets/stylesheets/materialize/components/_collapsible.scss +1 -1
- data/app/assets/stylesheets/materialize/components/_color.scss +1 -1
- data/app/assets/stylesheets/materialize/components/_dropdown.scss +2 -2
- data/app/assets/stylesheets/materialize/components/_form.scss +12 -13
- data/app/assets/stylesheets/materialize/components/_global.scss +33 -4
- data/app/assets/stylesheets/materialize/components/_grid.scss +0 -1
- data/app/assets/stylesheets/materialize/components/_modal.scss +3 -4
- data/app/assets/stylesheets/materialize/components/_navbar.scss +1 -1
- data/app/assets/stylesheets/materialize/components/_sideNav.scss +5 -5
- data/app/assets/stylesheets/materialize/components/_slider.scss +4 -4
- data/app/assets/stylesheets/materialize/components/_typography.scss +14 -10
- data/app/assets/stylesheets/materialize/components/_variables.scss +15 -7
- data/lib/materialize-sass/engine.rb +2 -2
- data/lib/materialize-sass/version.rb +1 -1
- 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
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
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
|
-
|
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:
|
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:
|
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:
|
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
|
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:
|
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:
|
138
|
+
background-color: $card-bg-color;
|
137
139
|
width: 100%;
|
138
140
|
overflow-y: auto;
|
139
141
|
top: 100%;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
.dropdown-content {
|
2
2
|
@extend .z-depth-1;
|
3
|
-
background-color:
|
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:
|
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:
|
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
|
498
|
-
border-bottom: 2px solid
|
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
|
-
.
|
636
|
+
span.caret {
|
637
637
|
color: initial;
|
638
638
|
position: absolute;
|
639
639
|
right: 0;
|
640
|
-
top:
|
641
|
-
font-size:
|
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
|
-
|
685
|
-
|
686
|
-
|
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
|
-
|
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:
|
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
|
-
|
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
|
-
|
526
|
+
padding-left: 30px;
|
527
|
+
}
|
528
|
+
.collection-item.avatar {
|
529
|
+
padding-left: 72px;
|
501
530
|
}
|
502
531
|
}
|
503
532
|
|
@@ -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:
|
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:
|
76
|
+
position: absolute;
|
78
77
|
bottom: 0;
|
79
78
|
}
|
80
79
|
}
|
@@ -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:
|
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
|
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
|
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
|
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:
|
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
|
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
|
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
|
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
|
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:
|
32
|
-
h2 { font-size: $h2-fontsize; line-height:
|
33
|
-
h3 { font-size: $h3-fontsize; line-height:
|
34
|
-
h4 { font-size: $h4-fontsize; line-height:
|
35
|
-
h5 { font-size: $h5-fontsize; line-height:
|
36
|
-
h6 { font-size: $h6-fontsize; line-height:
|
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
|
}
|