diff options
Diffstat (limited to 'paper/bootswatch.less')
-rw-r--r-- | paper/bootswatch.less | 34 |
1 files changed, 28 insertions, 6 deletions
diff --git a/paper/bootswatch.less b/paper/bootswatch.less index 1d32ced7..88569de7 100644 --- a/paper/bootswatch.less +++ b/paper/bootswatch.less @@ -40,9 +40,6 @@ #btn(@class,@bg) { .btn-@{class} { - background-size: 200% 200%; - background-position: 50%; - &:focus { background-color: @bg; } @@ -53,9 +50,6 @@ } &:active { - background-color: darken(@bg, 12%); - #gradient > .radial(darken(@bg, 12%) 10%, @bg 11%); - background-size: 1000% 1000%; .box-shadow(2px 2px 4px rgba(0,0,0,.4)); } } @@ -74,6 +68,7 @@ border: none; .box-shadow(1px 1px 4px rgba(0,0,0,.4)); .transition(all 0.4s); + .ripple(); &-link { border-radius: @btn-border-radius-base; @@ -621,3 +616,30 @@ input[type="checkbox"], } } +// Effects ================================================================= + +.ripple { + position: relative; + + &:after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + #gradient > .radial(#000 10%, transparent 10.01%); + background-size: 1000% 1000%; + background-position: 50%; + opacity: 0; + pointer-events: none; + transition: background .5s, opacity 1s; + } + + &:active:after { + background-size: 0% 0%; + opacity: .2; + transition: 0s; + } +}
\ No newline at end of file |