|
@@ -2,141 +2,4 @@ page-hall {
|
|
|
ion-content {
|
|
|
background: #3f50b4 !important;
|
|
|
}
|
|
|
-// Animation properties
|
|
|
-$anim-width: 200px;
|
|
|
-$anim-height: 250px;
|
|
|
-$anim-duration: 4s;
|
|
|
-
|
|
|
-// Splash properties
|
|
|
-$splash-width: $anim-width;
|
|
|
-$splash-height: $anim-width / 2;
|
|
|
-$splash-origin: $splash-height / 2;
|
|
|
-$water-level: $splash-origin;
|
|
|
-
|
|
|
-// Drip properties
|
|
|
-$drip-size: 15px;
|
|
|
-$drip-pos: ($splash-width / 2) - ($drip-size / 2);
|
|
|
-$drip-rebound: 40px;
|
|
|
-$drip-re-size: 5px;
|
|
|
-$drip-re-pos: ($splash-width / 2) - ($drip-re-size / 2);
|
|
|
-
|
|
|
-// Colours
|
|
|
-$c-drip: #FFF;
|
|
|
-$c-splash: #FFF;
|
|
|
-$c-bg: #43A2CE;
|
|
|
-
|
|
|
-
|
|
|
-.drip {
|
|
|
- width: $anim-width;
|
|
|
- height: $anim-height;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: center;
|
|
|
- margin: auto;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &:before {
|
|
|
- position: absolute;
|
|
|
- left: $drip-pos;
|
|
|
- top: 0;
|
|
|
- content: '';
|
|
|
- width: $drip-size;
|
|
|
- height: $drip-size;
|
|
|
- background-color: $c-drip;
|
|
|
- border-radius: 50%;
|
|
|
- opacity: 0;
|
|
|
- animation: drip $anim-duration ease infinite;
|
|
|
- }
|
|
|
-
|
|
|
- &:after {
|
|
|
- box-sizing: border-box;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- content: '';
|
|
|
- width: 0px;
|
|
|
- height: 0px;
|
|
|
- border: solid 4px $c-drip;
|
|
|
- border-radius: 50%;
|
|
|
- opacity: 0;
|
|
|
- animation: splash $anim-duration ease infinite;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes drip {
|
|
|
- 10% {
|
|
|
- top: 0;
|
|
|
- opacity: 1;
|
|
|
- animation-timing-function: cubic-bezier(.24,0,.76,.14);
|
|
|
- }
|
|
|
- 25% {
|
|
|
- opacity: 1;
|
|
|
- top: $anim-height - $water-level;
|
|
|
- animation-timing-function: ease-out;
|
|
|
- width: $drip-size;
|
|
|
- height: $drip-size;
|
|
|
- left: $drip-pos;
|
|
|
- }
|
|
|
- 30% {
|
|
|
- opacity: 1;
|
|
|
- top: $anim-height - ($water-level + $drip-rebound);
|
|
|
- width: $drip-re-size;
|
|
|
- height: $drip-re-size;
|
|
|
- animation-timing-function: ease-in;
|
|
|
- left: $drip-re-pos;
|
|
|
- }
|
|
|
- 33% {
|
|
|
- top: $anim-height - $water-level;
|
|
|
- opacity: 0;
|
|
|
- animation-timing-function: ease-out;
|
|
|
- left: $drip-re-pos;
|
|
|
- }
|
|
|
- 33.001% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes splash {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 25% {
|
|
|
- bottom: $splash-height / 2;
|
|
|
- left: $splash-width / 2;
|
|
|
- opacity: 0;
|
|
|
- width: 0px;
|
|
|
- height: 0px;
|
|
|
- }
|
|
|
- 25.001% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 33% {
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- opacity: 0;
|
|
|
- width: $splash-width;
|
|
|
- height: $splash-height;
|
|
|
- }
|
|
|
- 33.001% {
|
|
|
- bottom: $splash-height / 2;
|
|
|
- left: $splash-width / 2;
|
|
|
- opacity: 1;
|
|
|
- width: 0px;
|
|
|
- height: 0px;
|
|
|
- }
|
|
|
- 43% {
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- opacity: 0;
|
|
|
- width: $splash-width;
|
|
|
- height: $splash-height;
|
|
|
- }
|
|
|
- 43.001% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
}
|