leumas-private-shared/src/styles/Glow.css

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

@keyframes glow {
    from {
      box-shadow: 0 0 10px #0c64c1, 0 0 20px #0c64c1, 0 0 30px #0c64c1, 0 0 40px #0c64c1;
    }
    to {
      box-shadow: 0 0 20px #0c64c1, 0 0 30px #0c64c1, 0 0 40px #0c64c1, 0 0 50px #0c64c1;
    }
  }
  
  /* .avatar-glow {
    animation: glow 2s infinite;
  } */
  

  @keyframes glowing {
    0% { box-shadow: 0 0 5px #04d9ff, 0 0 10px #04d9ff, 0 0 15px #04d9ff, 0 0 20px #04d9ff; }
    10% { box-shadow: 0 0 10px #04d9ff, 0 0 20px #04d9ff, 0 0 30px #04d9ff, 0 0 40px #04d9ff; }
    20% { box-shadow: 0 0 20px #04d9ff, 0 0 30px #04d9ff, 0 0 40px #04d9ff, 0 0 50px #04d9ff; }
    30% { box-shadow: 0 0 30px #04d9ff, 0 0 40px #04d9ff, 0 0 50px #04d9ff, 0 0 60px #04d9ff; }
    40% { box-shadow: 0 0 40px #04d9ff, 0 0 50px #04d9ff, 0 0 60px #04d9ff, 0 0 70px #04d9ff; }
    50% { box-shadow: 0 0 50px #04d9ff, 0 0 60px #04d9ff, 0 0 70px #04d9ff, 0 0 80px #04d9ff; }
    60% { box-shadow: 0 0 60px #04d9ff, 0 0 70px #04d9ff, 0 0 80px #04d9ff, 0 0 90px #04d9ff; }
    70% { box-shadow: 0 0 70px #04d9ff, 0 0 80px #04d9ff, 0 0 90px #04d9ff, 0 0 100px #04d9ff; }
    80% { box-shadow: 0 0 80px #04d9ff, 0 0 90px #04d9ff, 0 0 100px #04d9ff, 0 0 110px #04d9ff; }
    90% { box-shadow: 0 0 90px #04d9ff, 0 0 100px #04d9ff, 0 0 110px #04d9ff, 0 0 120px #04d9ff; }
    100% { box-shadow: 0 0 100px #04d9ff, 0 0 150px #04d9ff, 0 0 200px #04d9ff, 0 0 250px #04d9ff; }
  }
  
.avatar-glow:hover {
    animation: glowing 2s infinite;
  }
  
  .avatar-glow {
    box-shadow: 0 0 5px #0c64c1, 0 0 10px #0c64c1;
  }
  
  /* .avatar-glow:hover {
    animation: glowing 2s infinite;
  } */
  
  .avatar-glow.notification {
    box-shadow: 0 0 5px #ff04d9, 0 0 10px #ff04d9;
    animation: glowing 1s infinite;
  }



  /* <div className={`some-other-class ${condition ? 'avatar-glow' : ''}`}>

</div>

<div className="some-other-class avatar-glow">

</div> */