materialize-sass 1.0.0.beta → 1.0.0.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 (46) hide show
  1. checksums.yaml +4 -4
  2. data/.gitattributes +1 -0
  3. data/README.md +2 -2
  4. data/Rakefile +1 -1
  5. data/assets/javascripts/materialize/autocomplete.js +94 -37
  6. data/assets/javascripts/materialize/buttons.js +4 -6
  7. data/assets/javascripts/materialize/carousel.js +9 -9
  8. data/assets/javascripts/materialize/chips.js +2 -2
  9. data/assets/javascripts/materialize/collapsible.js +13 -10
  10. data/assets/javascripts/materialize/datepicker.js +27 -44
  11. data/assets/javascripts/materialize/dropdown.js +38 -15
  12. data/assets/javascripts/materialize/extras/nouislider.js +1 -1
  13. data/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
  14. data/assets/javascripts/materialize/forms.js +7 -8
  15. data/assets/javascripts/materialize/global.js +28 -11
  16. data/assets/javascripts/materialize/materialbox.js +12 -7
  17. data/assets/javascripts/materialize/modal.js +8 -4
  18. data/assets/javascripts/materialize/parallax.js +1 -1
  19. data/assets/javascripts/materialize/pushpin.js +8 -3
  20. data/assets/javascripts/materialize/range.js +2 -19
  21. data/assets/javascripts/materialize/select.js +57 -33
  22. data/assets/javascripts/materialize/sidenav.js +5 -3
  23. data/assets/javascripts/materialize/slider.js +2 -1
  24. data/assets/javascripts/materialize/tabs.js +13 -8
  25. data/assets/javascripts/materialize/timepicker.js +22 -5
  26. data/assets/javascripts/materialize/toasts.js +4 -3
  27. data/assets/javascripts/materialize/tooltip.js +14 -8
  28. data/assets/javascripts/materialize.js +804 -685
  29. data/assets/stylesheets/materialize/components/_buttons.scss +2 -1
  30. data/assets/stylesheets/materialize/components/_collapsible.scss +8 -1
  31. data/assets/stylesheets/materialize/components/_datepicker.scss +5 -1
  32. data/assets/stylesheets/materialize/components/_dropdown.scss +10 -1
  33. data/assets/stylesheets/materialize/components/_global.scss +2 -0
  34. data/assets/stylesheets/materialize/components/_modal.scss +4 -0
  35. data/assets/stylesheets/materialize/components/_sidenav.scss +9 -17
  36. data/assets/stylesheets/materialize/components/_toast.scss +0 -1
  37. data/assets/stylesheets/materialize/components/_variables.scss +1 -0
  38. data/assets/stylesheets/materialize/components/forms/_input-fields.scss +2 -0
  39. data/assets/stylesheets/materialize/components/forms/_range.scss +3 -3
  40. data/assets/stylesheets/materialize/components/forms/_select.scss +19 -7
  41. data/assets/stylesheets/materialize/extras/nouislider.css +1 -1
  42. data/lib/materialize-sass/engine.rb +4 -1
  43. data/lib/materialize-sass/version.rb +1 -1
  44. data/lib/materialize-sass.rb +3 -8
  45. data/materialize-sass.gemspec +4 -5
  46. metadata +18 -32
@@ -284,7 +284,8 @@ button.btn-floating {
284
284
  &:focus {
285
285
  background-color: rgba(0, 0, 0, .1);
286
286
  }
287
- &.disabled {
287
+ &.disabled,
288
+ &.btn-flat[disabled] {
288
289
  background-color: transparent !important;
289
290
  color: $button-flat-disabled-color !important;
290
291
  cursor: default;
@@ -7,6 +7,10 @@
7
7
  }
8
8
 
9
9
  .collapsible-header {
10
+ &:focus {
11
+ outline: 0
12
+ }
13
+
10
14
  display: flex;
11
15
  cursor: pointer;
12
16
  -webkit-tap-highlight-color: transparent;
@@ -23,6 +27,9 @@
23
27
  margin-right: 1rem;
24
28
  }
25
29
  }
30
+ .keyboard-focused .collapsible-header:focus {
31
+ background-color: #eee;
32
+ }
26
33
 
27
34
  .collapsible-body {
28
35
  display: none;
@@ -33,7 +40,7 @@
33
40
 
34
41
  // Sidenav collapsible styling
35
42
  .sidenav,
36
- .sidenav.fixed {
43
+ .sidenav.sidenav-fixed {
37
44
 
38
45
  .collapsible {
39
46
  border: none;
@@ -41,7 +41,7 @@
41
41
  }
42
42
 
43
43
  .select-month input {
44
- width: 70px;
44
+ width: 80px;
45
45
  }
46
46
  }
47
47
 
@@ -175,6 +175,10 @@
175
175
  flex-direction: row;
176
176
  }
177
177
 
178
+ .datepicker-date-display {
179
+ flex: 0 1 270px;
180
+ }
181
+
178
182
  .datepicker-controls,
179
183
  .datepicker-table,
180
184
  .datepicker-footer {
@@ -25,7 +25,6 @@
25
25
 
26
26
  &:focus {
27
27
  outline: none;
28
- background-color: darken($dropdown-hover-bg-color, 8%);
29
28
  }
30
29
 
31
30
  &.divider {
@@ -67,6 +66,12 @@
67
66
  }
68
67
  }
69
68
 
69
+ body.keyboard-focused {
70
+ .dropdown-content li:focus {
71
+ background-color: darken($dropdown-hover-bg-color, 8%);
72
+ }
73
+ }
74
+
70
75
  // Input field specificity bugfix
71
76
  .input-field.col .dropdown-content [type="checkbox"] + label {
72
77
  top: 1px;
@@ -74,3 +79,7 @@
74
79
  height: 18px;
75
80
  transform: none;
76
81
  }
82
+
83
+ .dropdown-trigger {
84
+ cursor: pointer;
85
+ }
@@ -219,6 +219,7 @@ video.responsive-video {
219
219
 
220
220
  // Breadcrumbs
221
221
  .breadcrumb {
222
+ display: inline-block;
222
223
  font-size: 18px;
223
224
  color: rgba(255,255,255, .7);
224
225
 
@@ -241,6 +242,7 @@ video.responsive-video {
241
242
  font-size: 25px;
242
243
  margin: 0 10px 0 8px;
243
244
  -webkit-font-smoothing: antialiased;
245
+ float: left;
244
246
  }
245
247
 
246
248
  &:first-child:before {
@@ -1,4 +1,8 @@
1
1
  .modal {
2
+ &:focus {
3
+ outline: none;
4
+ }
5
+
2
6
  @extend .z-depth-5;
3
7
 
4
8
  display: none;
@@ -1,6 +1,6 @@
1
1
  .sidenav {
2
2
  position: fixed;
3
- width: 300px;
3
+ width: $sidenav-width;
4
4
  left: 0;
5
5
  top: 0;
6
6
  margin: 0;
@@ -38,7 +38,10 @@
38
38
  &.active { background-color: rgba(0,0,0,.05); }
39
39
  }
40
40
 
41
- li > a {
41
+ // Style non btn anchors
42
+ li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
43
+ &:hover { background-color: rgba(0,0,0,.05);}
44
+
42
45
  color: $sidenav-font-color;
43
46
  display: block;
44
47
  font-size: $sidenav-font-size;
@@ -47,21 +50,6 @@
47
50
  line-height: $sidenav-line-height;
48
51
  padding: 0 ($sidenav-padding * 2);
49
52
 
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
53
  & > i,
66
54
  & > [class^="mdi-"], li > a > [class*="mdi-"],
67
55
  & > i.material-icons {
@@ -74,6 +62,10 @@
74
62
  }
75
63
  }
76
64
 
65
+ // Stlye btn anchors
66
+ li > .btn, li > .btn-large, li > .btn-flat, li > .btn-floating {
67
+ margin: 10px ($sidenav-padding * 2);
68
+ }
77
69
 
78
70
  .divider {
79
71
  margin: ($sidenav-padding / 2) 0 0 0;
@@ -30,7 +30,6 @@
30
30
  height: auto;
31
31
  min-height: $toast-height;
32
32
  line-height: 1.5em;
33
- word-break: break-all;
34
33
  background-color: $toast-color;
35
34
  padding: 10px 25px;
36
35
  font-size: 1.1rem;
@@ -253,6 +253,7 @@ $navbar-brand-font-size: 2.1rem !default;
253
253
  // 14. Side Navigation
254
254
  // ==========================================================================
255
255
 
256
+ $sidenav-width: 300px !default;
256
257
  $sidenav-font-size: 14px !default;
257
258
  $sidenav-font-color: rgba(0,0,0,.87) !default;
258
259
  $sidenav-bg-color: #fff !default;
@@ -193,6 +193,8 @@ textarea.materialize-textarea {
193
193
  }
194
194
  }
195
195
 
196
+ // Autofill + date + time inputs
197
+ & > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
196
198
  & > input[type=date]:not(.browser-default) + label,
197
199
  & > input[type=time]:not(.browser-default) + label {
198
200
  transform: translateY(-14px) scale(.8);
@@ -94,7 +94,7 @@ input[type=range]::-webkit-slider-thumb {
94
94
 
95
95
  }
96
96
 
97
- input[type=range].focused:focus:not(.active)::-webkit-slider-thumb {
97
+ .keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
98
98
  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
99
99
  }
100
100
 
@@ -125,7 +125,7 @@ input[type=range]:-moz-focusring {
125
125
  outline-offset: -1px;
126
126
  }
127
127
 
128
- input[type=range].focused:focus:not(.active)::-moz-range-thumb {
128
+ .keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
129
129
  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
130
130
  }
131
131
 
@@ -156,6 +156,6 @@ input[type=range]::-ms-thumb {
156
156
  @include range-thumb;
157
157
  }
158
158
 
159
- input[type=range].focused:focus:not(.active)::-ms-thumb {
159
+ .keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
160
160
  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
161
161
  }
@@ -1,10 +1,9 @@
1
1
  /* Select Field
2
2
  ========================================================================== */
3
3
 
4
- select { display: none; }
5
- select.browser-default { display: block; }
6
-
4
+ select.browser-default { opacity: 1; }
7
5
  select {
6
+ opacity: 0;
8
7
  background-color: $select-background;
9
8
  width: 100%;
10
9
  padding: $select-padding;
@@ -92,6 +91,17 @@ select {
92
91
  top: -26px;
93
92
  font-size: $label-font-size;
94
93
  }
94
+
95
+ // Hide select with overflow hidden instead of using display none
96
+ // (this prevents form validation errors with hidden form elements)
97
+ .hide-select {
98
+ width: 0;
99
+ height: 0;
100
+ overflow: hidden;
101
+ position: absolute;
102
+ top: 0;
103
+ z-index: -1;
104
+ }
95
105
  }
96
106
 
97
107
  // Disabled styles
@@ -125,6 +135,12 @@ select:disabled {
125
135
  background-color: transparent;
126
136
  }
127
137
 
138
+ body.keyboard-focused {
139
+ .select-dropdown.dropdown-content li:focus {
140
+ background-color: $select-option-focus;
141
+ }
142
+ }
143
+
128
144
  .select-dropdown.dropdown-content {
129
145
  li {
130
146
  &:hover {
@@ -134,10 +150,6 @@ select:disabled {
134
150
  &.selected {
135
151
  background-color: $select-option-selected;
136
152
  }
137
-
138
- &:focus {
139
- background-color: $select-option-focus;
140
- }
141
153
  }
142
154
  }
143
155
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Materialize v1.0.0-alpha.4 (http://materializecss.com)
2
+ * Materialize 1.0.0 (http://materializecss.com)
3
3
  * Copyright 2014-2015 Materialize
4
4
  * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
5
5
  */
@@ -8,7 +8,10 @@ module Materialize
8
8
  %w(stylesheets javascripts).each do |sub|
9
9
  app.config.assets.paths << root.join('assets', sub).to_s
10
10
  end
11
- ActionController::Base.send(:helper, Materialize::Helpers)
11
+
12
+ ActiveSupport.on_load(:action_controller_base) do
13
+ ActionController::Base.send(:helper, Materialize::Helpers)
14
+ end
12
15
  end
13
16
  end
14
17
  end
@@ -1,6 +1,6 @@
1
1
  module Materialize
2
2
  module Sass
3
- VERSION = "1.0.0.beta"
3
+ VERSION = "1.0.0.1"
4
4
  end
5
5
  end
6
6
 
@@ -12,9 +12,10 @@ module Materialize
12
12
  register_hanami
13
13
  elsif sprockets?
14
14
  register_sprockets
15
+ elsif defined?(::Sass) && ::Sass.respond_to?(:load_paths)
16
+ # The deprecated `sass` gem:
17
+ ::Sass.load_paths << stylesheets_path
15
18
  end
16
-
17
- configure_sass
18
19
  end
19
20
 
20
21
  # Paths
@@ -49,12 +50,6 @@ module Materialize
49
50
 
50
51
  private
51
52
 
52
- def configure_sass
53
- require 'sass'
54
-
55
- ::Sass.load_paths << stylesheets_path
56
- end
57
-
58
53
  def register_rails_engine
59
54
  require 'materialize-sass/engine'
60
55
  end
@@ -8,8 +8,8 @@ Gem::Specification.new do |spec|
8
8
  spec.version = Materialize::Sass::VERSION
9
9
  spec.authors = ["mkhairi"]
10
10
  spec.email = ["khairi@labs.my"]
11
- spec.summary = %q{Materialzecss sass for rails.}
12
- spec.description = %q{Use materialzecss in your rails asset pipeline.}
11
+ spec.summary = %q{Materializecss rubygem for rails/sprockets base}
12
+ spec.description = %q{A modern responsive front-end framework based on Material Design. https://materializecss.com/}
13
13
  spec.homepage = "https://github.com/mkhairi/materialize-sass"
14
14
  spec.license = "MIT"
15
15
 
@@ -19,10 +19,9 @@ Gem::Specification.new do |spec|
19
19
  spec.require_paths = ["lib"]
20
20
 
21
21
  # development dependencies
22
- spec.add_development_dependency "bundler", "~> 1.7"
23
- spec.add_development_dependency "rake", "~> 10.0"
22
+ spec.add_development_dependency "bundler", ">= 2.2.10"
23
+ spec.add_development_dependency "rake", ">= 12.3.3"
24
24
 
25
25
  #runtime dependencies
26
- spec.add_runtime_dependency 'sass', '>= 3.5.2'
27
26
  spec.add_runtime_dependency 'autoprefixer-rails', '>= 6.0.3'
28
27
  end
metadata CHANGED
@@ -1,57 +1,43 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: materialize-sass
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.0.beta
4
+ version: 1.0.0.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - mkhairi
8
- autorequire:
8
+ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-03-24 00:00:00.000000000 Z
11
+ date: 2021-09-10 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - "~>"
17
+ - - ">="
18
18
  - !ruby/object:Gem::Version
19
- version: '1.7'
19
+ version: 2.2.10
20
20
  type: :development
21
21
  prerelease: false
22
22
  version_requirements: !ruby/object:Gem::Requirement
23
23
  requirements:
24
- - - "~>"
24
+ - - ">="
25
25
  - !ruby/object:Gem::Version
26
- version: '1.7'
26
+ version: 2.2.10
27
27
  - !ruby/object:Gem::Dependency
28
28
  name: rake
29
- requirement: !ruby/object:Gem::Requirement
30
- requirements:
31
- - - "~>"
32
- - !ruby/object:Gem::Version
33
- version: '10.0'
34
- type: :development
35
- prerelease: false
36
- version_requirements: !ruby/object:Gem::Requirement
37
- requirements:
38
- - - "~>"
39
- - !ruby/object:Gem::Version
40
- version: '10.0'
41
- - !ruby/object:Gem::Dependency
42
- name: sass
43
29
  requirement: !ruby/object:Gem::Requirement
44
30
  requirements:
45
31
  - - ">="
46
32
  - !ruby/object:Gem::Version
47
- version: 3.5.2
48
- type: :runtime
33
+ version: 12.3.3
34
+ type: :development
49
35
  prerelease: false
50
36
  version_requirements: !ruby/object:Gem::Requirement
51
37
  requirements:
52
38
  - - ">="
53
39
  - !ruby/object:Gem::Version
54
- version: 3.5.2
40
+ version: 12.3.3
55
41
  - !ruby/object:Gem::Dependency
56
42
  name: autoprefixer-rails
57
43
  requirement: !ruby/object:Gem::Requirement
@@ -66,13 +52,14 @@ dependencies:
66
52
  - - ">="
67
53
  - !ruby/object:Gem::Version
68
54
  version: 6.0.3
69
- description: Use materialzecss in your rails asset pipeline.
55
+ description: A modern responsive front-end framework based on Material Design. https://materializecss.com/
70
56
  email:
71
57
  - khairi@labs.my
72
58
  executables: []
73
59
  extensions: []
74
60
  extra_rdoc_files: []
75
61
  files:
62
+ - ".gitattributes"
76
63
  - ".gitignore"
77
64
  - Gemfile
78
65
  - LICENSE.txt
@@ -161,7 +148,7 @@ homepage: https://github.com/mkhairi/materialize-sass
161
148
  licenses:
162
149
  - MIT
163
150
  metadata: {}
164
- post_install_message:
151
+ post_install_message:
165
152
  rdoc_options: []
166
153
  require_paths:
167
154
  - lib
@@ -172,13 +159,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
172
159
  version: '0'
173
160
  required_rubygems_version: !ruby/object:Gem::Requirement
174
161
  requirements:
175
- - - ">"
162
+ - - ">="
176
163
  - !ruby/object:Gem::Version
177
- version: 1.3.1
164
+ version: '0'
178
165
  requirements: []
179
- rubyforge_project:
180
- rubygems_version: 2.7.3
181
- signing_key:
166
+ rubygems_version: 3.2.15
167
+ signing_key:
182
168
  specification_version: 4
183
- summary: Materialzecss sass for rails.
169
+ summary: Materializecss rubygem for rails/sprockets base
184
170
  test_files: []