@gofynd/nitrozen-vue/src/base/waves.less

Fynd Design Library for Vue

@import './variable.less';

// .waves-effect {
//     position: relative;
//     cursor: pointer;
//     display: inline-block;
//     overflow: hidden;
//     user-select: none;
//     -webkit-tap-highlight-color: transparent;
//     vertical-align: middle;
//     z-index: 1;
//     transition: .3s ease-out;
  
//     .waves-ripple {
//       position: absolute;
//       border-radius: 50%;
//       width: 20px;
//       height: 20px;
//       margin-top:-10px;
//       margin-left:-10px;
//       opacity: 0;
//       background: rgba(0,0,0,0.2);
//       transition: all 0.7s ease-out;
//       transition-property: transform, opacity;
//       transform: scale(0);
//       pointer-events: none;
//     }
  
//     // Waves Colors
//     &.waves-light .waves-ripple {
//       background-color: rgba(255, 255, 255, 0.45);
//     }
//     &.waves-primary .waves-ripple {
//       background-color: @PrimaryColor;
//     }
//     &.waves-secondary .waves-ripple {
//       background-color: @SecondaryColor;
//     }
  
//     // Style input button bug.
//     input[type="button"], input[type="reset"], input[type="submit"] {
//       border: 0;
//       outline: none;
//     //   font-style: normal;
//       font-size: inherit;
//       text-transform: inherit;
//     //   background: none;
//     }
  
//     img {
//       position: relative;
//       z-index: -1;
//     }
//   }
  
//   .waves-circle {
//     transform: translateZ(0);
//     -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
//   }
  
//   .waves-input-wrapper {
//     border-radius: 0.2em;
//     vertical-align: bottom;
  
//     .waves-button-input {
//       position: relative;
//       top: 0;
//       left: 0;
//       z-index: 1;
//     }
//   }
  
//   .waves-circle {
//     text-align: center;
//     width: 2.5em;
//     height: 2.5em;
//     line-height: 2.5em;
//     border-radius: 50%;
//     -webkit-mask-image: none;
//   }
  
//   .waves-block {
//     display: block;
//   }
  
//   /* Firefox Bug: link not triggered */
//   .waves-effect .waves-ripple {
//     z-index: -1;
//   }



// .ripple {
//     background-position: center;
//     transition: background 0.8s;
//     cursor: pointer;
//   }
//   .ripple:hover {
//     background: @PrimaryHoverColor radial-gradient(circle, transparent 1%, @PrimaryHoverColor 1%) center/15000%;
//   }
//   .ripple:active {
//     background-color: @PrimaryColor;
//     background-size: 100%;
//     transition: background 0s;
//   }


.ripple {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    cursor: pointer;
  }
  
  .ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .8s, opacity 1s;
  }
  
  .ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
  }