materialize-sass 0.97.0 → 0.97.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/materialize-sprockets.js +4 -0
  3. data/app/assets/javascripts/materialize.js +242 -182
  4. data/app/assets/javascripts/materialize/cards.js +1 -1
  5. data/app/assets/javascripts/materialize/chips.js +9 -0
  6. data/app/assets/javascripts/materialize/dropdown.js +31 -9
  7. data/app/assets/javascripts/materialize/extras/nouislider.js +1666 -0
  8. data/app/assets/javascripts/materialize/extras/nouislider.min.js +6 -0
  9. data/app/assets/javascripts/materialize/forms.js +27 -19
  10. data/app/assets/javascripts/materialize/global.js +1 -1
  11. data/app/assets/javascripts/materialize/scrollFire.js +1 -1
  12. data/app/assets/javascripts/materialize/sideNav.js +17 -14
  13. data/app/assets/javascripts/materialize/tabs.js +2 -9
  14. data/app/assets/javascripts/materialize/toasts.js +13 -2
  15. data/app/assets/javascripts/materialize/tooltip.js +144 -133
  16. data/app/assets/stylesheets/materialize.scss +2 -1
  17. data/app/assets/stylesheets/materialize/components/_cards.scss +1 -0
  18. data/app/assets/stylesheets/materialize/components/_chips.scss +27 -0
  19. data/app/assets/stylesheets/materialize/components/_collapsible.scss +1 -1
  20. data/app/assets/stylesheets/materialize/components/_form.scss +4 -2
  21. data/app/assets/stylesheets/materialize/components/_global.scss +17 -6
  22. data/app/assets/stylesheets/materialize/components/_materialbox.scss +1 -0
  23. data/app/assets/stylesheets/materialize/components/_navbar.scss +11 -0
  24. data/app/assets/stylesheets/materialize/components/_preloader.scss +2 -0
  25. data/app/assets/stylesheets/materialize/components/_roboto.scss +8 -4
  26. data/app/assets/stylesheets/materialize/components/_tabs.scss +5 -0
  27. data/app/assets/stylesheets/materialize/components/_toast.scss +1 -1
  28. data/app/assets/stylesheets/materialize/components/_typography.scss +4 -1
  29. data/app/assets/stylesheets/materialize/components/_variables.scss +3 -0
  30. data/app/assets/stylesheets/materialize/extras/nouislider.css +258 -0
  31. data/lib/materialize-sass/version.rb +1 -1
  32. metadata +7 -2
@@ -27,6 +27,7 @@
27
27
  @import "materialize/components/waves";
28
28
  @import "materialize/components/modal";
29
29
  @import "materialize/components/collapsible";
30
+ @import "materialize/components/chips";
30
31
  @import "materialize/components/materialbox";
31
32
  @import "materialize/components/form";
32
33
  @import "materialize/components/table_of_contents";
@@ -35,4 +36,4 @@
35
36
  @import "materialize/components/slider";
36
37
  @import "materialize/components/date_picker/default.scss";
37
38
  @import "materialize/components/date_picker/default.date.scss";
38
- @import "materialize/components/date_picker/default.time.scss";
39
+ @import "materialize/components/date_picker/default.time.scss";
@@ -86,6 +86,7 @@
86
86
 
87
87
  // Image background for content
88
88
  img {
89
+ display: block;
89
90
  border-radius: 2px 2px 0 0;
90
91
  position: relative;
91
92
  left: 0;
@@ -0,0 +1,27 @@
1
+ .chip {
2
+ display: inline-block;
3
+ height: 32px;
4
+ font-size: 13px;
5
+ font-weight: 500;
6
+ color: rgba(0,0,0,.6);
7
+ line-height: 32px;
8
+ padding: 0 12px;
9
+ border-radius: 16px;
10
+ background-color: #E4E4E4;
11
+
12
+ img {
13
+ float: left;
14
+ margin: 0 8px 0 -12px;
15
+ height: 32px;
16
+ width: 32px;
17
+ border-radius: 50%;
18
+ }
19
+
20
+ i.material-icons {
21
+ cursor: pointer;
22
+ float: right;
23
+ font-size: 16px;
24
+ line-height: 32px;
25
+ padding-left: 8px;
26
+ }
27
+ }
@@ -9,7 +9,7 @@
9
9
  .collapsible-header {
10
10
  display: block;
11
11
  cursor: pointer;
12
- height: $collapsible-height;
12
+ min-height: $collapsible-height;
13
13
  line-height: $collapsible-height;
14
14
  padding: 0 1rem;
15
15
  background-color: $collapsible-header-color;
@@ -187,7 +187,8 @@ textarea.materialize-textarea {
187
187
  color: #444;
188
188
 
189
189
  & + label i,
190
- & ~ .mdi-navigation-close {
190
+ & ~ .mdi-navigation-close,
191
+ & ~ .material-icons {
191
192
  color: #444;
192
193
  }
193
194
  }
@@ -196,7 +197,8 @@ textarea.materialize-textarea {
196
197
  left: 1rem;
197
198
  }
198
199
 
199
- & ~ .mdi-navigation-close {
200
+ & ~ .mdi-navigation-close,
201
+ & ~ .material-icons {
200
202
  position: absolute;
201
203
  top: 0;
202
204
  right: 1rem;
@@ -1,6 +1,3 @@
1
- @charset "UTF-8";
2
-
3
-
4
1
  //Default styles
5
2
 
6
3
  html {
@@ -142,7 +139,7 @@ video.responsive-video {
142
139
  .pagination {
143
140
 
144
141
  li {
145
- float: left;
142
+ display: inline-block;
146
143
  font-size: 1.2rem;
147
144
  padding: 0 10px;
148
145
  line-height: 30px;
@@ -312,7 +309,7 @@ footer.page-footer {
312
309
  height: 50px;
313
310
  line-height: 50px;
314
311
  color: rgba(255,255,255,.8);
315
- background-color: rgba(51,51,51,.08);;
312
+ background-color: rgba(51,51,51,.08);
316
313
  @extend .light;
317
314
  }
318
315
  }
@@ -341,7 +338,7 @@ table {
341
338
  }
342
339
  }
343
340
 
344
- &.hoverable > tbody > tr {
341
+ &.highlight > tbody > tr {
345
342
  @include transition(background-color .25s ease);
346
343
  &:hover {
347
344
  background-color: $table-striped-color;
@@ -503,6 +500,10 @@ td, th{
503
500
  &.active {
504
501
  background-color: $collection-active-bg-color;
505
502
  color: $collection-active-color;
503
+
504
+ .secondary-content {
505
+ color: #fff;
506
+ }
506
507
  }
507
508
  }
508
509
  a.collection-item{
@@ -536,6 +537,11 @@ td, th{
536
537
  float: right;
537
538
  color: $secondary-color;
538
539
  }
540
+ .collapsible .collection {
541
+ margin: 0;
542
+ border: none;
543
+ }
544
+
539
545
 
540
546
 
541
547
  // Badges
@@ -561,6 +567,11 @@ span.badge {
561
567
  content: " new";
562
568
  }
563
569
  }
570
+ nav ul a span.badge {
571
+ position: static;
572
+ margin-left: 4px;
573
+ line-height: 0;
574
+ }
564
575
 
565
576
  // Responsive Videos
566
577
  .video-container {
@@ -1,4 +1,5 @@
1
1
  .materialboxed {
2
+ display: block;
2
3
  cursor: zoom-in;
3
4
  position: relative;
4
5
  @include transition(opacity .4s);
@@ -55,6 +55,17 @@ nav {
55
55
  @media #{$medium-and-down} {
56
56
  left: 50%;
57
57
  @include transform(translateX(-50%));
58
+
59
+ &.left, &.right {
60
+ padding: 0;
61
+ @include transform(none);
62
+ }
63
+
64
+ &.left { left: 0.5rem; }
65
+ &.right {
66
+ right: 0.5rem;
67
+ left: auto;
68
+ }
58
69
  }
59
70
 
60
71
  &.right {
@@ -63,6 +63,7 @@
63
63
  width: 100%;
64
64
  height: 100%;
65
65
  opacity: 0;
66
+ border-color: $spinner-default-color;
66
67
  }
67
68
 
68
69
  .spinner-blue,
@@ -122,6 +123,7 @@
122
123
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
123
124
  }
124
125
 
126
+ .active .spinner-layer,
125
127
  .active .spinner-layer.spinner-blue-only,
126
128
  .active .spinner-layer.spinner-red-only,
127
129
  .active .spinner-layer.spinner-yellow-only,
@@ -1,13 +1,15 @@
1
1
  @font-face {
2
2
  font-family: "Roboto";
3
- src: font-url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
3
+ src: local(Roboto Thin),
4
+ font-url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
4
5
  font-url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
5
6
  font-url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");
6
7
  font-weight: 200;
7
8
  }
8
9
  @font-face {
9
10
  font-family: "Roboto";
10
- src: font-url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
11
+ src: local(Roboto Light),
12
+ font-url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
11
13
  font-url("#{$roboto-font-path}Roboto-Light.woff") format("woff"),
12
14
  font-url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype");
13
15
  font-weight: 300;
@@ -15,7 +17,9 @@
15
17
 
16
18
  @font-face {
17
19
  font-family: "Roboto";
18
- src: font-url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
20
+ src:
21
+ local(Roboto Regular),
22
+ font-url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
19
23
  font-url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"),
20
24
  font-url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype");
21
25
  font-weight: 400;
@@ -35,4 +39,4 @@
35
39
  font-url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"),
36
40
  font-url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype");
37
41
  font-weight: 700;
38
- }
42
+ }
@@ -1,4 +1,5 @@
1
1
  .tabs {
2
+ @include flexbox();
2
3
  position: relative;
3
4
  height: 48px;
4
5
  background-color: $tabs-bg-color;
@@ -7,6 +8,10 @@
7
8
  white-space: nowrap;
8
9
 
9
10
  .tab {
11
+ -webkit-box-flex: 1;
12
+ -webkit-flex-grow: 1;
13
+ -ms-flex-positive: 1;
14
+ flex-grow: 1;
10
15
  display: block;
11
16
  float: left;
12
17
  text-align: center;
@@ -1,7 +1,7 @@
1
1
  #toast-container {
2
2
  display:block;
3
3
  position: fixed;
4
- z-index: 1001;
4
+ z-index: 10000;
5
5
 
6
6
  @media #{$small-and-down} {
7
7
  min-width: 100%;
@@ -1,3 +1,4 @@
1
+
1
2
  a {
2
3
  text-decoration: none;
3
4
  }
@@ -42,6 +43,7 @@ small { font-size: 75%; }
42
43
  .light { font-weight: 300; }
43
44
  .thin { font-weight: 200; }
44
45
 
46
+
45
47
  .flow-text{
46
48
  font-weight: 300;
47
49
  $i: 0;
@@ -51,8 +53,9 @@ small { font-size: 75%; }
51
53
  }
52
54
  $i: $i + 1;
53
55
  }
56
+
54
57
  // Handle below 360px screen
55
58
  @media only screen and (max-width: 360px) {
56
59
  font-size: 1.2rem;
57
60
  }
58
- }
61
+ }
@@ -109,6 +109,9 @@ $slider-bg-color: color('grey', 'base') !default;
109
109
  $slider-bg-color-light: color('grey', 'lighten-2') !default;
110
110
  $slider-indicator-color: color('green', 'base') !default;
111
111
 
112
+ /*** Spinners | Loaders ***/
113
+ $spinner-default-color: $secondary-color !default;
114
+
112
115
  /*** Tabs ***/
113
116
  $tabs-underline-color: $primary-color-light !default;
114
117
  $tabs-text-color: $primary-color !default;
@@ -0,0 +1,258 @@
1
+ /*!
2
+ * Materialize v0.97.1 (http://materializecss.com)
3
+ * Copyright 2014-2015 Materialize
4
+ * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
5
+ */
6
+
7
+ /* Functional styling;
8
+ * These styles are required for noUiSlider to function.
9
+ * You don't need to change these rules to apply your design.
10
+ */
11
+ .noUi-target,
12
+ .noUi-target * {
13
+ -webkit-touch-callout: none;
14
+ -webkit-user-select: none;
15
+ -ms-touch-action: none;
16
+ -ms-user-select: none;
17
+ -moz-user-select: none;
18
+ -moz-box-sizing: border-box;
19
+ box-sizing: border-box;
20
+ }
21
+ .noUi-target {
22
+ position: relative;
23
+ direction: ltr;
24
+ }
25
+ .noUi-base {
26
+ width: 100%;
27
+ height: 100%;
28
+ position: relative;
29
+ z-index: 1; /* Fix 401 */
30
+ }
31
+ .noUi-origin {
32
+ position: absolute;
33
+ right: 0;
34
+ top: 0;
35
+ left: 0;
36
+ bottom: 0;
37
+ }
38
+ .noUi-handle {
39
+ position: relative;
40
+ z-index: 1;
41
+ }
42
+ .noUi-stacking .noUi-handle {
43
+ /* This class is applied to the lower origin when
44
+ its values is > 50%. */
45
+ z-index: 10;
46
+ }
47
+ .noUi-state-tap .noUi-origin {
48
+ -webkit-transition: left 0.25s, top 0.25s;
49
+ transition: left 0.25s, top 0.25s;
50
+ }
51
+ .noUi-state-drag * {
52
+ cursor: inherit !important;
53
+ }
54
+
55
+ /* Painting and performance;
56
+ * Browsers can paint handles in their own layer.
57
+ */
58
+ .noUi-base {
59
+ -webkit-transform: translate3d(0,0,0);
60
+ transform: translate3d(0,0,0);
61
+ }
62
+
63
+ /* Slider size and handle placement;
64
+ */
65
+ .noUi-horizontal {
66
+ height: 18px;
67
+ }
68
+ .noUi-horizontal .noUi-handle {
69
+ width: 34px;
70
+ height: 28px;
71
+ left: -17px;
72
+ top: -6px;
73
+ }
74
+ .noUi-vertical {
75
+ width: 18px;
76
+ }
77
+ .noUi-vertical .noUi-handle {
78
+ width: 28px;
79
+ height: 34px;
80
+ left: -6px;
81
+ top: -17px;
82
+ }
83
+
84
+ /* Styling;
85
+ */
86
+ .noUi-background {
87
+ background: #FAFAFA;
88
+ box-shadow: inset 0 1px 1px #f0f0f0;
89
+ }
90
+ .noUi-connect {
91
+ background: #3FB8AF;
92
+ box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
93
+ -webkit-transition: background 450ms;
94
+ transition: background 450ms;
95
+ }
96
+ .noUi-origin {
97
+ border-radius: 2px;
98
+ }
99
+ .noUi-target {
100
+ border-radius: 4px;
101
+ border: 1px solid #D3D3D3;
102
+ box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
103
+ }
104
+ .noUi-target.noUi-connect {
105
+ box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
106
+ }
107
+
108
+ /* Handles and cursors;
109
+ */
110
+ .noUi-dragable {
111
+ cursor: w-resize;
112
+ }
113
+ .noUi-vertical .noUi-dragable {
114
+ cursor: n-resize;
115
+ }
116
+ .noUi-handle {
117
+ border: 1px solid #D9D9D9;
118
+ border-radius: 3px;
119
+ background: #FFF;
120
+ cursor: default;
121
+ box-shadow: inset 0 0 1px #FFF,
122
+ inset 0 1px 7px #EBEBEB,
123
+ 0 3px 6px -3px #BBB;
124
+ }
125
+ .noUi-active {
126
+ box-shadow: inset 0 0 1px #FFF,
127
+ inset 0 1px 7px #DDD,
128
+ 0 3px 6px -3px #BBB;
129
+ }
130
+
131
+ /* Handle stripes;
132
+ */
133
+ .noUi-handle:before,
134
+ .noUi-handle:after {
135
+ content: "";
136
+ display: block;
137
+ position: absolute;
138
+ height: 14px;
139
+ width: 1px;
140
+ background: #E8E7E6;
141
+ left: 14px;
142
+ top: 6px;
143
+ }
144
+ .noUi-handle:after {
145
+ left: 17px;
146
+ }
147
+ .noUi-vertical .noUi-handle:before,
148
+ .noUi-vertical .noUi-handle:after {
149
+ width: 14px;
150
+ height: 1px;
151
+ left: 6px;
152
+ top: 14px;
153
+ }
154
+ .noUi-vertical .noUi-handle:after {
155
+ top: 17px;
156
+ }
157
+
158
+ /* Disabled state;
159
+ */
160
+ [disabled].noUi-connect,
161
+ [disabled] .noUi-connect {
162
+ background: #B8B8B8;
163
+ }
164
+ [disabled].noUi-origin,
165
+ [disabled] .noUi-handle {
166
+ cursor: not-allowed;
167
+ }
168
+
169
+ /*Materialize Theming*/
170
+
171
+ .noUi-target {
172
+
173
+ box-shadow: none;
174
+ border: none;
175
+ }
176
+ .noUi-base {
177
+ height: 15px;
178
+ top: -6px;
179
+ }
180
+ .noUi-background {
181
+ height: 3px;
182
+ top: 6px;
183
+ background-color: #bfbfbf;
184
+ }
185
+ .noUi-horizontal {
186
+ height: 3px;
187
+ }
188
+ .noUi-connect {
189
+ height: 3px;
190
+ top: 6px;
191
+ background-color: #26A69A;
192
+ box-shadow: none;
193
+ }
194
+
195
+ /*Handle*/
196
+ .noUi-horizontal .noUi-handle {
197
+ width: 15px;
198
+ height: 15px;
199
+ border-radius: 50%;
200
+ box-shadow: none;
201
+ background-color: #26A69A;
202
+ border: none;
203
+ left: -5px;
204
+ top: -6px;
205
+ transition: width .2s cubic-bezier(0.215, 0.610, 0.355, 1.000),
206
+ height .2s cubic-bezier(0.215, 0.610, 0.355, 1.000),
207
+ left .2s cubic-bezier(0.215, 0.610, 0.355, 1.000),
208
+ top .2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
209
+ }
210
+ .noUi-handle:before {
211
+ content: none;
212
+ }
213
+ .noUi-handle:after {
214
+ content: none;
215
+ }
216
+ /*Handle on Drag*/
217
+ .noUi-target .noUi-active.noUi-handle {
218
+ width: 3px;
219
+ height: 3px;
220
+ left: 0;
221
+ top: 0;
222
+ }
223
+
224
+ .noUi-target .noUi-active .range-label span {
225
+ }
226
+ .noUi-target .range-label {
227
+ position: absolute;
228
+ height: 30px;
229
+ width: 30px;
230
+ top: -17px;
231
+ left: -2px;
232
+ background-color: #26A69A;
233
+ border-radius: 50%;
234
+ transition: border-radius .25s cubic-bezier(0.215, 0.610, 0.355, 1.000),
235
+ transform .25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
236
+ transform: scale(.5) rotate(-45deg);
237
+ transform-origin: 50% 100%;
238
+ }
239
+ .noUi-target .noUi-active .range-label {
240
+ border-radius: 15px 15px 15px 0;
241
+ transform: rotate(-45deg) translate(23px, -25px);
242
+
243
+ }
244
+ .range-label span {
245
+ width: 100%;
246
+ text-align: center;
247
+ color: #fff;
248
+ font-size: 12px;
249
+ transform: rotate(45deg);
250
+ opacity: 0;
251
+ position: absolute;
252
+ top: 7px;
253
+ left: -1px;
254
+ transition: opacity .25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
255
+ }
256
+ .noUi-active .range-label span {
257
+ opacity: 1;
258
+ }