tahnik/devRantron

// !compileOnSave

.sidenav_container
  width: $sidenav_width
  height: 100vh
  // This line prevents re-renders of fixed positioned element
  backface-visibility: hidden
  display: flex
  flex-direction: column
  background-color: #40415A
  .navs
    flex: 7
    .devRant_logo
      padding: 0rem
      .devRant_placeholder
        padding: 1rem 0rem 0rem 0rem
        display: flex
        flex-direction: column
        align-items: center
        text-align: center
        img
          width: 60%
          margin-bottom: 1rem
          display: inline-block
        .item
          background-color: #C14857
          width: $sidenav_width
          padding: 0.85rem 0.7rem
          text-align: left
          box-sizing: border-box
          &:hover
            background-color: #54556E
    .updateBtn
      background-color: #c14857 !important
      &:hover
        background-color: #a8414d !important
    .item
      user-select: none
      i
        margin-right: 0.5rem
      padding: 0.85rem 0.7rem
      background-color: #40415A
      color: white
      transition: all 0.1s cubic-bezier(0.24, 0, 0.18, 1.05)
      cursor: pointer
      &:hover
        background-color: #54556E
    .item.active
      background-color: #54556E
  .add_rant
    flex: 3
    display: flex
    justify-content: center
    .add_button
      align-self: flex-end
      margin-bottom: 1rem
      width: 3.5rem
      height: 3.5rem
      border-radius: 100%
      display: flex
      justify-content: center
      align-items: center
      background-color: #C14857
      font-size: 1.5rem
      color: white