Contents

/**
 * MUI Ripple module
 */

// ============================================================================
// RIPPLE
// ============================================================================
.mui-ripple-effect {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;

  // initial properties
  opacity: 0.4;
  transform: scale(1);

  &.mui--animate-in {
    opacity: 0;
    transform: scale(7);
    transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
  }

  &.mui--active {
    opacity: 0.3;
  }

  &.mui--animate-out {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
  }
}



// ============================================================================
// BUTTON-SPECIFIC STYLES
// ============================================================================
.mui-btn > .mui-ripple-effect {
  background-color: $mui-btn-default-ripple-color;
}

.mui-btn--primary > .mui-ripple-effect {
  background-color: $mui-btn-primary-ripple-color;
}

.mui-btn--dark > .mui-ripple-effect {
  background-color: $mui-btn-dark-ripple-color;
}

.mui-btn--danger > .mui-ripple-effect {
  background-color: $mui-btn-danger-ripple-color;
}

.mui-btn--accent > .mui-ripple-effect {
  background-color: $mui-btn-accent-ripple-color;
}

.mui-btn--flat > .mui-ripple-effect {
  background-color: $mui-btn-flat-ripple-color;
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
mui-sass-0.6.2	vendor/assets/stylesheets/mui/_ripple.scss
mui-sass-0.6.1	vendor/assets/stylesheets/mui/_ripple.scss