git.roojs.org Git - bootswatch/blob - material-design/css/ripples.css

   1 .withripple {
   2   position: relative;
   3 }
   4 .ripple-wrapper {
   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: rgba(0, 0, 0, 0.05);
  23   -webkit-transform: scale(1);
  24       -ms-transform: scale(1);
  25           transform: scale(1);
  26   -webkit-transform-origin: 50%;
  27       -ms-transform-origin: 50%;
  28           transform-origin: 50%;
  29   opacity: 0;
  30   pointer-events: none;
  31 }
  32 .ripple.ripple-on {
  33   transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  34   transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  35   opacity: 0.1;
  36 }
  37 .ripple.ripple-out {
  38   transition: opacity 0.1s linear 0s !important;
  39   opacity: 0;
  40 }
  41 /*# sourceMappingURL=ripples.css.map */