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.
- checksums.yaml +4 -4
- data/.gitattributes +1 -0
- data/README.md +2 -2
- data/Rakefile +1 -1
- data/assets/javascripts/materialize/autocomplete.js +94 -37
- data/assets/javascripts/materialize/buttons.js +4 -6
- data/assets/javascripts/materialize/carousel.js +9 -9
- data/assets/javascripts/materialize/chips.js +2 -2
- data/assets/javascripts/materialize/collapsible.js +13 -10
- data/assets/javascripts/materialize/datepicker.js +27 -44
- data/assets/javascripts/materialize/dropdown.js +38 -15
- data/assets/javascripts/materialize/extras/nouislider.js +1 -1
- data/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
- data/assets/javascripts/materialize/forms.js +7 -8
- data/assets/javascripts/materialize/global.js +28 -11
- data/assets/javascripts/materialize/materialbox.js +12 -7
- data/assets/javascripts/materialize/modal.js +8 -4
- data/assets/javascripts/materialize/parallax.js +1 -1
- data/assets/javascripts/materialize/pushpin.js +8 -3
- data/assets/javascripts/materialize/range.js +2 -19
- data/assets/javascripts/materialize/select.js +57 -33
- data/assets/javascripts/materialize/sidenav.js +5 -3
- data/assets/javascripts/materialize/slider.js +2 -1
- data/assets/javascripts/materialize/tabs.js +13 -8
- data/assets/javascripts/materialize/timepicker.js +22 -5
- data/assets/javascripts/materialize/toasts.js +4 -3
- data/assets/javascripts/materialize/tooltip.js +14 -8
- data/assets/javascripts/materialize.js +804 -685
- data/assets/stylesheets/materialize/components/_buttons.scss +2 -1
- data/assets/stylesheets/materialize/components/_collapsible.scss +8 -1
- data/assets/stylesheets/materialize/components/_datepicker.scss +5 -1
- data/assets/stylesheets/materialize/components/_dropdown.scss +10 -1
- data/assets/stylesheets/materialize/components/_global.scss +2 -0
- data/assets/stylesheets/materialize/components/_modal.scss +4 -0
- data/assets/stylesheets/materialize/components/_sidenav.scss +9 -17
- data/assets/stylesheets/materialize/components/_toast.scss +0 -1
- data/assets/stylesheets/materialize/components/_variables.scss +1 -0
- data/assets/stylesheets/materialize/components/forms/_input-fields.scss +2 -0
- data/assets/stylesheets/materialize/components/forms/_range.scss +3 -3
- data/assets/stylesheets/materialize/components/forms/_select.scss +19 -7
- data/assets/stylesheets/materialize/extras/nouislider.css +1 -1
- data/lib/materialize-sass/engine.rb +4 -1
- data/lib/materialize-sass/version.rb +1 -1
- data/lib/materialize-sass.rb +3 -8
- data/materialize-sass.gemspec +4 -5
- 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:
|
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,6 +1,6 @@
|
|
1
1
|
.sidenav {
|
2
2
|
position: fixed;
|
3
|
-
width:
|
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
|
-
|
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;
|
@@ -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]
|
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]
|
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]
|
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 {
|
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
|
|
@@ -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
|
-
|
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
|
data/lib/materialize-sass.rb
CHANGED
@@ -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
|
data/materialize-sass.gemspec
CHANGED
@@ -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{
|
12
|
-
spec.description = %q{
|
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", "
|
23
|
-
spec.add_development_dependency "rake", "
|
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.
|
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:
|
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:
|
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:
|
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.
|
48
|
-
type: :
|
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.
|
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:
|
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:
|
164
|
+
version: '0'
|
178
165
|
requirements: []
|
179
|
-
|
180
|
-
|
181
|
-
signing_key:
|
166
|
+
rubygems_version: 3.2.15
|
167
|
+
signing_key:
|
182
168
|
specification_version: 4
|
183
|
-
summary:
|
169
|
+
summary: Materializecss rubygem for rails/sprockets base
|
184
170
|
test_files: []
|