tahnik/devRantron

// !compileOnSave

.notifs_container
  pointer-events: none
  position: fixed
  right: 0
  z-index: 99
  //display: none
  &.active
    pointer-events: all
  button
    margin: 0px
    width: 3.6rem
    right: 0px
  @keyframes notif_bubbles_in
    0%
      transform: translateY(-3rem)
      opacity: 0
    100%
      transform: translateY(0)
      opacity: 1
  @keyframes notif_bubbles_out
    0%
      transform: translateY(0)
      opacity: 0
    100%
      transform: translateY(-3rem)
      opacity: 0
  .notifs_ball
    pointer-events: all !important
    z-index: 299
    border-radius: 50%
    width: 3.2rem
    height: 3.2rem
    position: absolute
    top: -0.8rem
    right: -0.8rem
    font-size: 1.3rem
    .num_unread
      position: absolute
      bottom: 0
      left: 0
      height: 20px
      width: 20px
      border-radius: 50%
      background-color: #8c8d9e
      font-size: 0.7rem
      display: flex
      justify-content: center
      align-items: center
      &.unread
        background-color: #62B38D
  .notifs_bubbles_container
    z-index: 99
    position: absolute
    width: 3.2rem
    height: 3.2rem
    top: -0.8rem
    right: -0.8rem
    border-radius: 50%
    background-color: rgba(0, 0, 0, 0.9)
    transition: transform 0.3s
    transition-delay: 0.05s
    transform: scale(0)
  .notifs_bubbles_container.active
    transform: scale(100)
  .notif_bubbles
    display: flex
    pointer-events: none
    opacity: 0
    z-index: 199
    animation: notif_bubbles_out 0.3s forwards
    position: relative
    width: 100vw
    height: calc(100vh)
    margin-top: 20px
    transition: transform 0.2s
    flex-direction: column
    align-items: center
    &.active
      pointer-events: all
      opacity: 0
      animation: notif_bubbles_in 0.3s forwards 0.15s
    &.inactive
      opacity: 1
      animation: notif_bubbles_out 0.3s forwards
    .notifs_clear
      z-index: 299
      width: 9.5rem
      min-height: 2.3rem
      margin-bottom: 0.5rem
    .notifs_sort
      top: 48px
    .notif_bubble_container
      display: flex
      width: 100%
      align-items: center
      flex-direction: column
      overflow-y: scroll
      .notif_bubble
        width: 20rem
        border-radius: 5px
        color: #fff
        text-align: right
        padding: 0.5rem 0.5rem 1rem 1rem
        margin: 0.5rem 0
        transition: all 0.2s
        &:hover
          background-color: rgba(255, 255, 255, 0.2)
          cursor: pointer
        &:active
          transform: scale(0.95)
        .notif_desc
          display: flex
          align-items: center
          height: 3rem
          padding-left: 1rem
          p
            margin: 0px
            text-align: left
        .notif_badge.read
          img
            -webkit-filter: grayscale(100%)
        .notif_badge
          float: left
          height: 3.5rem
          width: 3.5rem
          border-radius: 50%
          text-align: center
          background: #C14857
          color: white
          position: relative
          i
            position: absolute
            top: 0
            left: -8px
            background-color: #D55161
            border-radius: 100%
            height: 23px
            width: 23px
            font-size: 0.9rem
            line-height: 1.4rem
            &.read
              background: #a2a1a1
        .notif_image
          height: 100%
          width: 100%
          border-radius: 100%
  ::-webkit-scrollbar
    display: none