git.roojs.org Git - bootswatch/blob - material-kit/sass/material-kit/_ripples.scss

   1 .withripple {
   2     position: relative;
   3 }
   4 .ripple-container {
   5     position: absolute;
   6     top: 0;
   7     left: 0;
   8     z-index: 1;
   9     width: 100%;
  10     height: 100%;
  11     overflow: hidden;
  12     border-radius: inherit;
  13     pointer-events: none;
  14 }
  15 .ripple {
  16     position: absolute;
  17     width: 20px;
  18     height: 20px;
  19     margin-left: -10px;
  20     margin-top: -10px;
  21     border-radius: 100%;
  22     background-color: #000; // fallback color
  23     background-color: rgba(0,0,0,0.05);
  24     transform: scale(1);
  25     transform-origin: 50%;
  26     opacity: 0;
  27     pointer-events: none;
  28 }
  29 .ripple.ripple-on {
  30     transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  31     opacity: 0.1;
  32 }
  33 .ripple.ripple-out {
  34     transition: opacity 0.1s linear 0s !important;
  35     opacity: 0;
  36 }