Skip to content

Commit 53eaec4

Browse files
DogfaloDogfalo
committed
Removed will change on waves due to visual artifacting on certain browsers
1 parent 930e7e8 commit 53eaec4

File tree

3 files changed

+84
-148
lines changed

3 files changed

+84
-148
lines changed

‎bin/materialize.css

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5251,13 +5251,12 @@ button.btn-floating {
52515251
display: inline-block;
52525252
overflow: hidden;
52535253
-webkit-user-select: none;
5254-
-moz-user-select: none;
5255-
-ms-user-select: none;
5256-
user-select: none;
5254+
-moz-user-select: none;
5255+
-ms-user-select: none;
5256+
user-select: none;
52575257
-webkit-tap-highlight-color: transparent;
52585258
vertical-align: middle;
52595259
z-index: 1;
5260-
will-change: opacity, transform;
52615260
transition: .3s ease-out;
52625261
}
52635262

‎css/ghpages-materialize.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sass/components/_waves.scss

Lines changed: 80 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -10,168 +10,105 @@
1010

1111

1212
.waves-effect {
13+
position: relative;
14+
cursor: pointer;
15+
display: inline-block;
16+
overflow: hidden;
17+
user-select: none;
18+
-webkit-tap-highlight-color: transparent;
19+
vertical-align: middle;
20+
z-index: 1;
21+
transition: .3s ease-out;
22+
23+
.waves-ripple {
24+
position: absolute;
25+
border-radius: 50%;
26+
width: 20px;
27+
height: 20px;
28+
margin-top:-10px;
29+
margin-left:-10px;
30+
opacity: 0;
31+
32+
background: rgba(0,0,0,0.2);
33+
transition: all 0.7s ease-out;
34+
transition-property: transform, opacity;
35+
transform: scale(0);
36+
pointer-events: none;
37+
}
38+
39+
// Waves Colors
40+
&.waves-light .waves-ripple {
41+
background-color: rgba(255, 255, 255, 0.45);
42+
}
43+
&.waves-red .waves-ripple {
44+
background-color: rgba(244, 67, 54, .70);
45+
}
46+
&.waves-yellow .waves-ripple {
47+
background-color: rgba(255, 235, 59, .70);
48+
}
49+
&.waves-orange .waves-ripple {
50+
background-color: rgba(255, 152, 0, .70);
51+
}
52+
&.waves-purple .waves-ripple {
53+
background-color: rgba(156, 39, 176, 0.70);
54+
}
55+
&.waves-green .waves-ripple {
56+
background-color: rgba(76, 175, 80, 0.70);
57+
}
58+
&.waves-teal .waves-ripple {
59+
background-color: rgba(0, 150, 136, 0.70);
60+
}
61+
62+
// Style input button bug.
63+
input[type="button"], input[type="reset"], input[type="submit"] {
64+
border: 0;
65+
font-style: normal;
66+
font-size: inherit;
67+
text-transform: inherit;
68+
background: none;
69+
}
70+
71+
img {
1372
position: relative;
14-
cursor: pointer;
15-
display: inline-block;
16-
overflow: hidden;
17-
-webkit-user-select: none;
18-
-moz-user-select: none;
19-
-ms-user-select: none;
20-
user-select: none;
21-
-webkit-tap-highlight-color: transparent;
22-
// white-space: nowrap;
23-
// outline: 0;
24-
25-
vertical-align: middle;
26-
// cursor: pointer;
27-
// border: none;
28-
// outline: none;
29-
// color: inherit;
30-
// background-color: rgba(0, 0, 0, 0);
31-
// font-size: 1em;
32-
// line-height:1em;
33-
// text-align: center;
34-
// text-decoration: none;
35-
z-index: 1;
36-
will-change: opacity, transform;
37-
transition: .3s ease-out;
38-
39-
.waves-ripple {
40-
position: absolute;
41-
border-radius: 50%;
42-
width: 20px;
43-
height: 20px;
44-
margin-top:-10px;
45-
margin-left:-10px;
46-
opacity: 0;
47-
48-
background: rgba(0,0,0,0.2);
49-
// $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
50-
// background: -webkit-radial-gradient($gradient);
51-
// background: -o-radial-gradient($gradient);
52-
// background: -moz-radial-gradient($gradient);
53-
// background: radial-gradient($gradient);
54-
transition: all 0.7s ease-out;
55-
transition-property: transform, opacity;
56-
transform: scale(0);
57-
pointer-events: none;
58-
}
59-
60-
// Waves Colors
61-
&.waves-light .waves-ripple {
62-
background-color: rgba(255, 255, 255, 0.45);
63-
}
64-
65-
&.waves-red .waves-ripple {
66-
background-color: rgba(244, 67, 54, .70);
67-
}
68-
&.waves-yellow .waves-ripple {
69-
background-color: rgba(255, 235, 59, .70);
70-
}
71-
&.waves-orange .waves-ripple {
72-
background-color: rgba(255, 152, 0, .70);
73-
}
74-
&.waves-purple .waves-ripple {
75-
background-color: rgba(156, 39, 176, 0.70);
76-
}
77-
&.waves-green .waves-ripple {
78-
background-color: rgba(76, 175, 80, 0.70);
79-
}
80-
&.waves-teal .waves-ripple {
81-
background-color: rgba(0, 150, 136, 0.70);
82-
}
83-
84-
// Style input button bug.
85-
input[type="button"], input[type="reset"], input[type="submit"] {
86-
border: 0;
87-
font-style: normal;
88-
font-size: inherit;
89-
text-transform: inherit;
90-
background: none;
91-
}
92-
93-
img {
94-
position: relative;
95-
z-index: -1;
96-
}
73+
z-index: -1;
74+
}
9775
}
9876

9977
.waves-notransition {
100-
transition: none #{"!important"};
78+
transition: none #{"!important"};
10179
}
10280

10381
.waves-circle {
104-
transform: translateZ(0);
105-
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
82+
transform: translateZ(0);
83+
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
10684
}
10785

108-
// .waves-button,
109-
// .waves-button:hover,
110-
// .waves-button:visited,
111-
// .waves-button-input {
112-
// white-space: nowrap;
113-
// vertical-align: middle;
114-
// cursor: pointer;
115-
// border: none;
116-
// outline: none;
117-
// color: inherit;
118-
// background-color: rgba(0, 0, 0, 0);
119-
// font-size: 1em;
120-
// line-height:1em;
121-
// text-align: center;
122-
// text-decoration: none;
123-
// z-index: 1;
124-
// }
125-
126-
// .waves-button {
127-
// padding: 0.85em 1.1em;
128-
// border-radius: 0.2em;
129-
// }
130-
131-
// .waves-button-input {
132-
// margin: 0;
133-
// padding: 0.85em 1.1em;
134-
// }
135-
13686
.waves-input-wrapper {
137-
border-radius: 0.2em;
138-
vertical-align: bottom;
87+
border-radius: 0.2em;
88+
vertical-align: bottom;
13989

140-
// &.waves-button {
141-
// padding: 0;
142-
// }
143-
144-
.waves-button-input {
145-
position: relative;
146-
top: 0;
147-
left: 0;
148-
z-index: 1;
149-
}
90+
.waves-button-input {
91+
position: relative;
92+
top: 0;
93+
left: 0;
94+
z-index: 1;
95+
}
15096
}
15197

15298
.waves-circle {
153-
text-align: center;
154-
width: 2.5em;
155-
height: 2.5em;
156-
line-height: 2.5em;
157-
border-radius: 50%;
158-
-webkit-mask-image: none;
99+
text-align: center;
100+
width: 2.5em;
101+
height: 2.5em;
102+
line-height: 2.5em;
103+
border-radius: 50%;
104+
-webkit-mask-image: none;
159105
}
160106

161-
// .waves-float {
162-
// -webkit-mask-image: none;
163-
// @include box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
164-
165-
// &:active {
166-
// @include box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
167-
// }
168-
// }
169-
170107
.waves-block {
171-
display: block;
108+
display: block;
172109
}
173110

174111
/* Firefox Bug: link not triggered */
175112
.waves-effect .waves-ripple {
176-
z-index: -1;
113+
z-index: -1;
177114
}

0 commit comments

Comments
 (0)