1
1
/* !
2
2
* Waves v0.7.6
3
- * http://fian.my.id/Waves
4
- *
5
- * Copyright 2014-2018 Alfiana E. Sibuea and other contributors
6
- * Released under the MIT license
3
+ * http://fian.my.id/Waves
4
+ *
5
+ * Copyright 2014-2018 Alfiana E. Sibuea and other contributors
6
+ * Released under the MIT license
7
7
* https://github.com/fians/Waves/blob/master/LICENSE */
8
8
9
9
@mixin waves-transition ($transition ){
10
10
-webkit-transition : $transition ;
11
- -moz-transition : $transition ;
11
+ -moz-transition : $transition ;
12
12
-o-transition : $transition ;
13
- transition : $transition ;
13
+ transition : $transition ;
14
14
}
15
15
16
16
@mixin waves-transform ($string ){
36
36
-ms-user-select : none ;
37
37
user-select : none ;
38
38
-webkit-tap-highlight-color : transparent ;
39
-
39
+
40
40
.waves-ripple {
41
- position : absolute ;
42
- border-radius : 50% ;
43
- width : 100px ;
44
- height : 100px ;
45
- margin-top :-50px ;
46
- margin-left :-50px ;
47
- opacity : 0 ;
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
- @include waves-transition (all 0.5s ease-out );
55
- -webkit-transition-property : -webkit-transform , opacity ;
56
- -moz-transition-property : -moz-transform , opacity ;
57
- -o-transition-property : -o-transform , opacity ;
58
- transition-property : transform , opacity ;
59
- @include waves-transform (scale (0 ) translate (0 ,0 ));
60
- pointer-events : none ;
41
+ position : absolute ;
42
+ border-radius : 50% ;
43
+ width : 100px ;
44
+ height : 100px ;
45
+ margin-top :-50px ;
46
+ margin-left :-50px ;
47
+ opacity : 0 ;
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
+ @include waves-transition (all 0.5s ease-out );
55
+ -webkit-transition-property : -webkit-transform , opacity ;
56
+ -moz-transition-property : -moz-transform , opacity ;
57
+ -o-transition-property : -o-transform , opacity ;
58
+ transition-property : transform , opacity ;
59
+ @include waves-transform (scale (0 ) translate (0 ,0 ));
60
+ pointer-events : none ;
61
61
}
62
62
63
63
& .waves-light .waves-ripple {
64
- background : rgba (255 ,255 ,255 ,0.4 );
65
- $gradient : rgba (255 ,255 ,255 ,0.2 ) 0 ,rgba (255 ,255 ,255 ,.3 ) 40% ,rgba (255 ,255 ,255 ,.4 ) 50% ,rgba (255 ,255 ,255 ,.5 ) 60% ,rgba (255 ,255 ,255 ,0 ) 70% ;
66
- background : -webkit-radial-gradient ($gradient );
67
- background : -o-radial-gradient ($gradient );
68
- background : -moz-radial-gradient ($gradient );
69
- background : radial-gradient ($gradient );
64
+ background : rgba (255 ,255 ,255 ,0.4 );
65
+ $gradient : rgba (255 ,255 ,255 ,0.2 ) 0 ,rgba (255 ,255 ,255 ,.3 ) 40% ,rgba (255 ,255 ,255 ,.4 ) 50% ,rgba (255 ,255 ,255 ,.5 ) 60% ,rgba (255 ,255 ,255 ,0 ) 70% ;
66
+ background : -webkit-radial-gradient ($gradient );
67
+ background : -o-radial-gradient ($gradient );
68
+ background : -moz-radial-gradient ($gradient );
69
+ background : radial-gradient ($gradient );
70
70
}
71
-
71
+
72
72
& .waves-classic .waves-ripple {
73
- background : rgba (0 ,0 ,0 ,0.2 );
73
+ background : rgba (0 ,0 ,0 ,0.2 );
74
74
}
75
-
75
+
76
76
& .waves-classic.waves-light .waves-ripple {
77
- background : rgba (255 ,255 ,255 ,0.4 );
77
+ background : rgba (255 ,255 ,255 ,0.4 );
78
78
}
79
79
80
80
// Waves Colors
114
114
@include waves-transition (none #{" !important" } );
115
115
}
116
116
117
- .waves-button ,
117
+ .waves-button ,
118
118
.waves-circle {
119
119
@include waves-transform (translateZ (0 ));
120
120
-webkit-mask-image : -webkit-radial-gradient (circle , white 100% , black 100% );
153
153
vertical-align : bottom ;
154
154
155
155
& .waves-button {
156
- padding : 0 ;
156
+ padding : 0 ;
157
157
}
158
158
159
159
.waves-button-input {
160
- position : relative ;
161
- top : 0 ;
162
- left : 0 ;
163
- z-index : 1 ;
160
+ position : relative ;
161
+ top : 0 ;
162
+ left : 0 ;
163
+ z-index : 1 ;
164
164
}
165
165
}
166
166
178
178
@include waves-transition (all 300ms );
179
179
180
180
& :active {
181
- @include waves-box-shadow (0px 8px 20px 1px rgba (0 , 0 , 0 , 0.30 ));
181
+ @include waves-box-shadow (0px 8px 20px 1px rgba (0 , 0 , 0 , 0.30 ));
182
182
}
183
183
}
184
184
185
185
.waves-block {
186
186
display : block ;
187
- }
187
+ }
0 commit comments