diff options
Diffstat (limited to 'paper/bootstrap.css')
-rw-r--r-- | paper/bootstrap.css | 146 |
1 files changed, 62 insertions, 84 deletions
diff --git a/paper/bootstrap.css b/paper/bootstrap.css index 5ee443d5..dd0955dd 100644 --- a/paper/bootstrap.css +++ b/paper/bootstrap.css @@ -6786,11 +6786,6 @@ button.close { -webkit-box-shadow: inset 0 -2px 0 #ffffff; box-shadow: inset 0 -2px 0 #ffffff; } -.btn-default { - -webkit-background-size: 200% 200%; - background-size: 200% 200%; - background-position: 50%; -} .btn-default:focus { background-color: #ffffff; } @@ -6799,21 +6794,9 @@ button.close { background-color: #f0f0f0; } .btn-default:active { - background-color: #e0e0e0; - background-image: -webkit-radial-gradient(circle, #e0e0e0 10%, #ffffff 11%); - background-image: -o-radial-gradient(circle, #e0e0e0 10%, #ffffff 11%); - background-image: radial-gradient(circle, #e0e0e0 10%, #ffffff 11%); - background-repeat: no-repeat; - -webkit-background-size: 1000% 1000%; - background-size: 1000% 1000%; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); } -.btn-primary { - -webkit-background-size: 200% 200%; - background-size: 200% 200%; - background-position: 50%; -} .btn-primary:focus { background-color: #2196f3; } @@ -6822,21 +6805,9 @@ button.close { background-color: #0d87e9; } .btn-primary:active { - background-color: #0b76cc; - background-image: -webkit-radial-gradient(circle, #0b76cc 10%, #2196f3 11%); - background-image: -o-radial-gradient(circle, #0b76cc 10%, #2196f3 11%); - background-image: radial-gradient(circle, #0b76cc 10%, #2196f3 11%); - background-repeat: no-repeat; - -webkit-background-size: 1000% 1000%; - background-size: 1000% 1000%; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); } -.btn-success { - -webkit-background-size: 200% 200%; - background-size: 200% 200%; - background-position: 50%; -} .btn-success:focus { background-color: #4caf50; } @@ -6845,21 +6816,9 @@ button.close { background-color: #439a46; } .btn-success:active { - background-color: #39843c; - background-image: -webkit-radial-gradient(circle, #39843c 10%, #4caf50 11%); - background-image: -o-radial-gradient(circle, #39843c 10%, #4caf50 11%); - background-image: radial-gradient(circle, #39843c 10%, #4caf50 11%); - background-repeat: no-repeat; - -webkit-background-size: 1000% 1000%; - background-size: 1000% 1000%; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); } -.btn-info { - -webkit-background-size: 200% 200%; - background-size: 200% 200%; - background-position: 50%; -} .btn-info:focus { background-color: #9c27b0; } @@ -6868,21 +6827,9 @@ button.close { background-color: #862197; } .btn-info:active { - background-color: #701c7e; - background-image: -webkit-radial-gradient(circle, #701c7e 10%, #9c27b0 11%); - background-image: -o-radial-gradient(circle, #701c7e 10%, #9c27b0 11%); - background-image: radial-gradient(circle, #701c7e 10%, #9c27b0 11%); - background-repeat: no-repeat; - -webkit-background-size: 1000% 1000%; - background-size: 1000% 1000%; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); } -.btn-warning { - -webkit-background-size: 200% 200%; - background-size: 200% 200%; - background-position: 50%; -} .btn-warning:focus { background-color: #ff9800; } @@ -6891,21 +6838,9 @@ button.close { background-color: #e08600; } .btn-warning:active { - background-color: #c27400; - background-image: -webkit-radial-gradient(circle, #c27400 10%, #ff9800 11%); - background-image: -o-radial-gradient(circle, #c27400 10%, #ff9800 11%); - background-image: radial-gradient(circle, #c27400 10%, #ff9800 11%); - background-repeat: no-repeat; - -webkit-background-size: 1000% 1000%; - background-size: 1000% 1000%; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); } -.btn-danger { - -webkit-background-size: 200% 200%; - background-size: 200% 200%; - background-position: 50%; -} .btn-danger:focus { background-color: #e51c23; } @@ -6914,21 +6849,9 @@ button.close { background-color: #cb171e; } .btn-danger:active { - background-color: #b0141a; - background-image: -webkit-radial-gradient(circle, #b0141a 10%, #e51c23 11%); - background-image: -o-radial-gradient(circle, #b0141a 10%, #e51c23 11%); - background-image: radial-gradient(circle, #b0141a 10%, #e51c23 11%); - background-repeat: no-repeat; - -webkit-background-size: 1000% 1000%; - background-size: 1000% 1000%; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); } -.btn-link { - -webkit-background-size: 200% 200%; - background-size: 200% 200%; - background-position: 50%; -} .btn-link:focus { background-color: #ffffff; } @@ -6937,13 +6860,6 @@ button.close { background-color: #f0f0f0; } .btn-link:active { - background-color: #e0e0e0; - background-image: -webkit-radial-gradient(circle, #e0e0e0 10%, #ffffff 11%); - background-image: -o-radial-gradient(circle, #e0e0e0 10%, #ffffff 11%); - background-image: radial-gradient(circle, #e0e0e0 10%, #ffffff 11%); - background-repeat: no-repeat; - -webkit-background-size: 1000% 1000%; - background-size: 1000% 1000%; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); } @@ -6955,6 +6871,36 @@ button.close { -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; + position: relative; +} +.btn:after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-image: -webkit-radial-gradient(circle, #000000 10%, transparent 10.01%); + background-image: -o-radial-gradient(circle, #000000 10%, transparent 10.01%); + background-image: radial-gradient(circle, #000000 10%, transparent 10.01%); + background-repeat: no-repeat; + -webkit-background-size: 1000% 1000%; + background-size: 1000% 1000%; + background-position: 50%; + opacity: 0; + pointer-events: none; + -webkit-transition: background .5s, opacity 1s; + -o-transition: background .5s, opacity 1s; + transition: background .5s, opacity 1s; +} +.btn:active:after { + -webkit-background-size: 0% 0%; + background-size: 0% 0%; + opacity: .2; + -webkit-transition: 0s; + -o-transition: 0s; + transition: 0s; } .btn-link { border-radius: 3px; @@ -7518,3 +7464,35 @@ input[type="checkbox"]:disabled:checked:after, .carousel-caption h6 { color: inherit; } +.ripple { + position: relative; +} +.ripple:after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-image: -webkit-radial-gradient(circle, #000000 10%, transparent 10.01%); + background-image: -o-radial-gradient(circle, #000000 10%, transparent 10.01%); + background-image: radial-gradient(circle, #000000 10%, transparent 10.01%); + background-repeat: no-repeat; + -webkit-background-size: 1000% 1000%; + background-size: 1000% 1000%; + background-position: 50%; + opacity: 0; + pointer-events: none; + -webkit-transition: background .5s, opacity 1s; + -o-transition: background .5s, opacity 1s; + transition: background .5s, opacity 1s; +} +.ripple:active:after { + -webkit-background-size: 0% 0%; + background-size: 0% 0%; + opacity: .2; + -webkit-transition: 0s; + -o-transition: 0s; + transition: 0s; +} |