From d42c8b528eb595101954f478e0024e3f079f6fbf Mon Sep 17 00:00:00 2001 From: schneefux Date: Wed, 22 Mar 2017 19:19:26 +0100 Subject: first implementation of fun stats site --- .../bootstrap-material-design/scss/_ripples.scss | 40 ++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 templates/assets/bootstrap-material-design/scss/_ripples.scss (limited to 'templates/assets/bootstrap-material-design/scss/_ripples.scss') 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; + } + } +} -- cgit v1.3.1