core/wave-effects/wave-effects.scss

0001 /*******************
0002 Wave Effects
0003 *******************/
0004
0005 .waves-effect {
0006     position: relative;
0007     cursor: pointer;
0008     display: inline-block;
0009     overflow: hidden;
0010     -webkit-user-select: none;
0011     -moz-user-select: none;
0012     -ms-user-select: none;
0013     user-select: none;
0014     -webkit-tap-highlight-color: transparent;
0015     vertical-align: middle;
0016     z-index: 1;
0017     will-change: opacity, transform;
0018     -webkit-transition: all 0.1s ease-out;
0019     -moz-transition: all 0.1s ease-out;
0020     -o-transition: all 0.1s ease-out;
0021     -ms-transition: all 0.1s ease-out;
0022     transition: all 0.1s ease-out;
0023     .waves-ripple {
0024         position: absolute;
0025         border-radius: 50%;
0026         width: 20px;
0027         height: 20px;
0028         margin-top: -10px;
0029         margin-left: -10px;
0030         opacity: 0;
0031         background: rgba(0, 0, 0, 0.2);
0032         -webkit-transition: all 0.7s ease-out;
0033         -moz-transition: all 0.7s ease-out;
0034         -o-transition: all 0.7s ease-out;
0035         -ms-transition: all 0.7s ease-out;
0036         transition: all 0.7s ease-out;
0037         -webkit-transition-property: -webkit-transform, opacity;
0038         -moz-transition-property: -moz-transform, opacity;
0039         -o-transition-property: -o-transform, opacity;
0040         transition-property: transform, opacity;
0041         -webkit-transform: scale(0);
0042         -moz-transform: scale(0);
0043         -ms-transform: scale(0);
0044         -o-transform: scale(0);
0045         transform: scale(0);
0046         pointer-events: none;
0047     }
0048 }
0049
0050 .waves-effect.waves-light {
0051     .waves-ripple {
0052         background-color: rgba(255, 255, 255, 0.45);
0053     }
0054 }
0055
0056 .waves-effect.waves-red {
0057     .waves-ripple {
0058         background-color: rgba(244, 67, 54, 0.7);
0059     }
0060 }
0061
0062 .waves-effect.waves-yellow {
0063     .waves-ripple {
0064         background-color: rgba(255, 235, 59, 0.7);
0065     }
0066 }
0067
0068 .waves-effect.waves-orange {
0069     .waves-ripple {
0070         background-color: rgba(255, 152, 0, 0.7);
0071     }
0072 }
0073
0074 .waves-effect.waves-purple {
0075     .waves-ripple {
0076         background-color: rgba(156, 39, 176, 0.7);
0077     }
0078 }
0079
0080 .waves-effect.waves-green {
0081     .waves-ripple {
0082         background-color: rgba(76, 175, 80, 0.7);
0083     }
0084 }
0085
0086 .waves-effect.waves-teal {
0087     .waves-ripple {
0088         background-color: rgba(0, 150, 136, 0.7);
0089     }
0090 }
0091
0092 html body .waves-notransition {
0093     -webkit-transition: none;
0094     -moz-transition: none;
0095     -o-transition: none;
0096     -ms-transition: none;
0097     transition: none;
0098 }
0099
0100 .waves-circle {
0101     -webkit-transform: translateZ(0);
0102     -moz-transform: translateZ(0);
0103     -ms-transform: translateZ(0);
0104     -o-transform: translateZ(0);
0105     transform: translateZ(0);
0106     text-align: center;
0107     width: 2.5em;
0108     height: 2.5em;
0109     line-height: 2.5em;
0110     border-radius: 50%;
0111     -webkit-mask-image: none;
0112 }
0113
0114 .waves-input-wrapper {
0115     border-radius: 0.2em;
0116     vertical-align: bottom;
0117     .waves-button-input {
0118         position: relative;
0119         top: 0;
0120         left: 0;
0121         z-index: 1;
0122     }
0123 }
0124
0125 .waves-block {
0126     display: block;
0127 }