datamad2017/_sass/vendor/_waves.scss

66 lines
1.6 KiB
SCSS

.waves-element {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
user-select: none;
transition: all .3s ease-out;
.waves-ripple {
position: absolute;
border-radius: 100%;
border-width:0px;
border-style:solid;
width:0px;
height:0px;
opacity:0;
border-color: rgba(0, 0, 0, 0.2);
transition: all 0.5s ease-out;
}
&.waves-light .waves-ripple {
border-color: rgba(255, 255, 255, 0.2);
}
}
.waves-notransition {
transition: none !important;
}
.waves-mask {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.waves-button {
@extend .waves-mask;
padding:10px 15px;
border-radius:4px;
a, a:hover, a:visited, a:link, button, input[type="submit"], input[type="button"] {
margin: 0;
padding:0;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border:none;
outline:none;
background:transparent;
color: inherit;
font-size:14px;
text-align: center;
text-decoration:none;
}
}
.waves-icon {
@extend .waves-mask;
text-align:center;
width:2.5em;
height:2.5em;
line-height:2.5em;
border-radius:20px;
}
.waves-will-raise {
-webkit-mask-image:none;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
&:active {
box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.26);
}
}
.waves-block {
display:block;
}