diff options
Diffstat (limited to 'templates/assets/bootstrap-material-design/scss/_ripples.scss')
| -rw-r--r-- | templates/assets/bootstrap-material-design/scss/_ripples.scss | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/templates/assets/bootstrap-material-design/scss/_ripples.scss b/templates/assets/bootstrap-material-design/scss/_ripples.scss new file mode 100644 index 0000000..7d7a45a --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_ripples.scss @@ -0,0 +1,40 @@ +// marker class (used as a selector for one-off elements to decorate) +.ripple { + position: relative; +} + +.ripple-container { + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + border-radius: inherit; + + .ripple-decorator { + position: absolute; + width: 20px; + height: 20px; + margin-top: -10px; + margin-left: -10px; + pointer-events: none; + background-color: rgba($black, 0.05); + border-radius: 100%; + opacity: 0; + transform: scale(1); + transform-origin: 50%; + + &.ripple-on { + opacity: 0.1; + transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; + } + + &.ripple-out { + opacity: 0; + transition: opacity 0.1s linear 0s !important; + } + } +} |
