framework7-without-localstorage/src/less/material/ripple.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Touch ripple === */
// Ripple Elements
.ripple, a.floating-button, .floating-button > a, a.link, a.item-link, .button, .modal-button, .tab-link, .label-radio, .label-checkbox, .actions-modal-button, .speed-dial-buttons a {
    -webkit-user-select: none;
    user-select: none;
}
// Ripple
.ripple-wave {
    left: 0;
    top: 0;
    position: absolute !important;
    border-radius: 50%;
    pointer-events: none;
    z-index:-1;
    background:rgba(0,0,0,0.1);
    padding: 0;
    margin: 0;
    font-size: 0;
    .transform(translate3d(0px, 0px, 0) scale(0));
    .transition(1400ms);
    &.ripple-wave-fill {
        .transition(300ms);
        opacity: 0.35;
    }
    &.ripple-wave-out {
        .transition(600ms);
        opacity: 0;
    }
    .button-fill &,  .picker-calendar-day &{
        z-index: 1;
    }
}
.button-fill, .navbar, .toolbar, .subnavbar, .searchbar, .notifications, .floating-button, .speed-dial-buttons a {
    .ripple-wave {
        background:rgba(255,255,255,0.3);
    }
}
.messagebar {
    .ripple-wave {
        background:rgba(0,0,0,0.1);
    }
}
.data-table .sortable-cell {
    .ripple-wave {
        z-index: 0;
    }
}
.form-checkbox, .form-radio {
    .ripple-wave {
        background: rgba(red(@themeColor), green(@themeColor), blue(@themeColor), 0.5);
        z-index: 0;
    }
}